1/** 2 * jQuery lightBox plugin 3 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) 4 * and adapted to me for use like a plugin from jQuery. 5 * @name jquery-lightbox-0.5.js 6 * @author Leandro Vieira Pinho - http://leandrovieira.com 7 * @version 0.5 8 * @date April 11, 2008 9 * @category jQuery plugin 10 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) 11 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US 12 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin 13 */ 14 15// Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias 16(function($) { 17 /** 18 * $ is an alias to jQuery object 19 * 20 */ 21 $.fn.lightBox = function(settings) { 22 // Settings to configure the jQuery lightBox plugin how you like 23 settings = jQuery.extend({ 24 // Configuration related to overlay 25 overlayBgColor: '#000', // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color. 26 overlayOpacity: 0.8, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9 27 // Configuration related to navigation 28 fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface. 29 // Configuration related to images 30 imageLoading: '/images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon 31 imageBtnPrev: '/images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image 32 imageBtnNext: '/images/lightbox-btn-next.gif', // (string) Path and the name of the next button image 33 imageBtnClose: '/images/lightbox-btn-close_site5.gif', // (string) Path and the name of the close btn 34 imageBlank: '/images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel) 35 // Configuration related to container image box 36 containerBorderSize: 10, // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box, you will need to update this value 37 containerResizeSpeed: 400, // (integer) Specify the resize duration of container image. These number are miliseconds. 400 is default. 38 // Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts. 39 txtImage: 'Image', // (string) Specify text "Image" 40 txtOf: 'of', // (string) Specify text "of" 41 // Configuration related to keyboard navigation 42 keyToClose: 'c', // (string) (c = close) Letter to close the jQuery lightBox interface. Beyond this letter, the letter X and the SCAPE key is used to. 43 keyToPrev: 'p', // (string) (p = previous) Letter to show the previous image 44 keyToNext: 'n', // (string) (n = next) Letter to show the next image. 45 // Don´t alter these variables in any way 46 imageArray: [], 47 activeImage: 0 48 },settings); 49 // Caching the jQuery object with all elements matched 50 var jQueryMatchedObj = this; // This, in this context, refer to jQuery object 51 /** 52 * Initializing the plugin calling the start function 53 * 54 * @return boolean false 55 */ 56 function _initialize() { 57 _start(this,jQueryMatchedObj); // This, in this context, refer to object (link) which the user have clicked 58 return false; // Avoid the browser following the link 59 } 60 /** 61 * Start the jQuery lightBox plugin 62 * 63 * @param object objClicked The object (link) whick the user have clicked 64 * @param object jQueryMatchedObj The jQuery object with all elements matched 65 */ 66 function _start(objClicked,jQueryMatchedObj) { 67 // Hime some elements to avoid conflict with overlay in IE. These elements appear above the overlay. 68 $('embed, object, select').css({ 'visibility' : 'hidden' }); 69 // Call the function to create the markup structure; style some elements; assign events in some elements. 70 _set_interface(); 71 // Unset total images in imageArray 72 settings.imageArray.length = 0; 73 // Unset image active information 74 settings.activeImage = 0; 75 // We have an image set? Or just an image? Let´s see it. 76 if ( jQueryMatchedObj.length == 1 ) { 77 d=''; 78 if(objClicked.getAttribute('title')!=null) d=objClicked.getAttribute('title'); 79 else d=objClicked.getAttribute('data'); 80 81 settings.imageArray.push(new Array(objClicked.getAttribute('href'),d)); 82 } else { 83 // Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references 84 for ( var i = 0; i < jQueryMatchedObj.length; i++ ) { 85 86 d=''; 87 if(jQueryMatchedObj[i].getAttribute('title')!=null){ 88 d=jQueryMatchedObj[i].getAttribute('title'); 89 }else{ 90 d=jQueryMatchedObj[i].getAttribute('data'); 91 } 92 settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),d)); 93 } 94 } 95 while ( settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href') ) { 96 settings.activeImage++; 97 } 98 // Call the function that prepares image exibition 99 _set_image_to_view(); 100 } 101 /** 102 * Create the jQuery lightBox plugin interface 103 * 104 * The HTML markup will be like that: 105 <div id="jquery-overlay"></div> 106 <div id="jquery-lightbox"> 107 <div id="lightbox-container-image-box"> 108 <div id="lightbox-container-image"> 109 <img src="../fotos/XX.jpg" id="lightbox-image"> 110 <div id="lightbox-nav"> 111 <a href="#" id="lightbox-nav-btnPrev"></a> 112 <a href="#" id="lightbox-nav-btnNext"></a> 113 </div> 114 <div id="lightbox-loading"> 115 <a href="#" id="lightbox-loading-link"> 116 <img src="../images/lightbox-ico-loading.gif"> 117 </a> 118 </div> 119 </div>
120 </div> 121 <div id="lightbox-container-image-data-box"> 122 <div id="lightbox-container-image-data"> 123 <div id="lightbox-image-details"> 124 <span id="lightbox-image-details-caption"></span> 125 <span id="lightbox-image-details-currentNumber"></span> 126 </div> 127 <div id="lightbox-secNav"> 128 <a href="#" id="lightbox-secNav-btnClose"> 129 <img src="../images/lightbox-btn-close.gif"> 130 </a> 131 </div> 132 </div> 133 </div> 134 </div> 135 * 136 */ 137 function _set_interface() { 138 // Apply the HTML markup into body tag 139 $('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img oncontextmenu="return false;" id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img oncontextmenu="return false;" src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img oncontextmenu="return false;" src="' + settings.imageBtnClose + '"></a></div></div></div></div>'); 140 // Get page sizes 141 var arrPageSizes = ___getPageSize(); 142 // Style overlay and show it 143 $('#jquery-overlay').css({ 144 backgroundColor: settings.overlayBgColor, 145 opacity: settings.overlayOpacity, 146 width: arrPageSizes[0], 147 height: arrPageSizes[1] 148 }).fadeIn(); 149 // Get page scroll 150 var arrPageScroll = ___getPageScroll(); 151 // Calculate top and left offset for the jquery-lightbox div object and show it 152 $('#jquery-lightbox').css({ 153 top: arrPageScroll[1] + (arrPageSizes[3] / 10), 154 left: arrPageScroll[0] 155 }).show(); 156 // Assigning click events in elements to close overlay 157 $('#jquery-overlay,#jquery-lightbox').click(function() { 158 _finish(); 159 }); 160 // Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects 161 $('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() { 162 _finish(); 163 return false; 164 }); 165 // If window was resized, calculate the new overlay dimensions 166 $(window).resize(function() { 167 // Get page sizes 168 var arrPageSizes = ___getPageSize(); 169 // Style overlay and show it 170 $('#jquery-overlay').css({ 171 width: arrPageSizes[0], 172 height: arrPageSizes[1] 173 }); 174 // Get page scroll 175 var arrPageScroll = ___getPageScroll(); 176 // Calculate top and left offset for the jquery-lightbox div object and show it 177 $('#jquery-lightbox').css({ 178 top: arrPageScroll[1] + (arrPageSizes[3] / 10), 179 left: arrPageScroll[0] 180 }); 181 }); 182 } 183 /** 184 * Prepares image exibition; doing a image´s preloader to calculate it´s size 185 * 186 */ 187 function _set_image_to_view() { // show the loading 188 // Show the loading 189 $('#lightbox-loading').show(); 190 if ( settings.fixedNavigation ) { 191 $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide(); 192 } else { 193 // Hide some elements 194 $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide(); 195 } 196 // Image preload process 197 var objImagePreloader = new Image(); 198 objImagePreloader.onload = function() { 199 $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]); 200 // Perfomance an effect in the image container resizing it 201 _resize_container_image_box(objImagePreloader.width,objImagePreloader.height); 202 // clear onLoad, IE behaves irratically with animated gifs otherwise 203 objImagePreloader.onload=function(){}; 204 }; 205 objImagePreloader.src = settings.imageArray[settings.activeImage][0]; 206 }; 207 /** 208 * Perfomance an effect in the image container resizing it 209 * 210 * @param integer intImageWidth The image´s width that will be showed 211 * @param integer intImageHeight The image´s height that will be showed 212 */ 213 function _resize_container_image_box(intImageWidth,intImageHeight) { 214 // Get current width and height 215 var intCurrentWidth = $('#lightbox-container-image-box').width(); 216 var intCurrentHeight = $('#lightbox-container-image-box').height(); 217 // Get the width and height of the selected image plus the padding 218 var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image´s width and the left and right padding value 219 var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image´s height and the left and right padding value 220 // Diferences 221 var intDiffW = intCurrentWidth - intWidth; 222 var intDiffH = intCurrentHeight - intHeight; 223 // Perfomance the effect
224 $('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); }); 225 if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) { 226 if ( $.browser.msie ) { 227 ___pause(250); 228 } else { 229 ___pause(100); 230 } 231 } 232 $('#lightbox-container-image-data-box').css({ width: intWidth }); 233 $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) }); 234 }; 235 /** 236 * Show the prepared image 237 * 238 */ 239 function _show_image() { 240 $('#lightbox-loading').hide(); 241 $('#lightbox-image').fadeIn(function() { 242 _show_image_data(); 243 _set_navigation(); 244 }); 245 _preload_neighbor_images(); 246 }; 247 /** 248 * Show the image information 249 * 250 */ 251 function _show_image_data() { 252 $('#lightbox-container-image-data-box').slideDown('fast'); 253 $('#lightbox-image-details-caption').hide(); 254 if ( settings.imageArray[settings.activeImage][1] ) { 255 $('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show(); 256 } 257 // If we have a image set, display 'Image X of X' 258 if ( settings.imageArray.length > 1 ) { 259 //$('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show(); 260 } 261 } 262 /** 263 * Display the button navigations 264 * 265 */ 266 function _set_navigation() { 267 $('#lightbox-nav').show(); 268 269 // Instead to define this configuration in CSS file, we define here. And it´s need to IE. Just. 270 $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); 271 272 // Show the prev button, if not the first image in set 273 if ( settings.activeImage != 0 ) { 274 if ( settings.fixedNavigation ) { 275 $('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' }) 276 .unbind() 277 .bind('click',function() { 278 settings.activeImage = settings.activeImage - 1; 279 _set_image_to_view(); 280 return false; 281 }); 282 } else { 283 // Show the images button for Next buttons 284 $('#lightbox-nav-btnPrev').unbind().hover(function() { 285 $(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' }); 286 },function() { 287 $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); 288 }).show().bind('click',function() { 289 settings.activeImage = settings.activeImage - 1; 290 _set_image_to_view(); 291 return false; 292 }); 293 } 294 } 295 296 // Show the next button, if not the last image in set 297 if ( settings.activeImage != ( settings.imageArray.length -1 ) ) { 298 if ( settings.fixedNavigation ) { 299 $('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' }) 300 .unbind() 301 .bind('click',function() { 302 settings.activeImage = settings.activeImage + 1; 303 _set_image_to_view(); 304 return false; 305 }); 306 } else { 307 // Show the images button for Next buttons 308 $('#lightbox-nav-btnNext').unbind().hover(function() { 309 $(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' }); 310 },function() { 311 $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); 312 }).show().bind('click',function() { 313 settings.activeImage = settings.activeImage + 1; 314 _set_image_to_view(); 315 return false; 316 }); 317 } 318 } 319 // Enable keyboard navigation 320 _enable_keyboard_navigation(); 321 } 322 /** 323 * Enable a support to keyboard navigation 324 * 325 */ 326 function _enable_keyboard_navigation() { 327 $(document).keydown(function(objEvent) { 328 _keyboard_action(objEvent); 329 }); 330 } 331 /** 332 * Disable the support to keyboard navigation 333 * 334 */ 335 function _disable_keyboard_navigation() { 336 $(document).unbind(); 337 } 338 /** 339 * Perform the keyboard actions 340 * 341 */ 342 function _keyboard_action(objEvent) { 343 // To ie 344 if ( objEvent == null ) { 345 keycode = event.keyCode; 346 escapeKey = 27; 347 // To Mozilla 348 } else { 349 keycode = objEvent.keyCode; 350 escapeKey = objEvent.DOM_VK_ESCAPE; 351 } 352 // Get the key in lower case form 353 key = String.fromCharCode(keycode).toLowerCase(); 354 // Verify the keys to close the ligthBox 355 if ( ( key == settings.keyToClose ) || ( key == 'x' ) || ( keycode == escapeKey ) ) { 356 _finish(); 357 }
358 // Verify the key to show the previous image 359 if ( ( key == settings.keyToPrev ) || ( keycode == 37 ) ) { 360 // If we´re not showing the first image, call the previous 361 if ( settings.activeImage != 0 ) { 362 settings.activeImage = settings.activeImage - 1; 363 _set_image_to_view(); 364 _disable_keyboard_navigation(); 365 } 366 } 367 // Verify the key to show the next image 368 if ( ( key == settings.keyToNext ) || ( keycode == 39 ) ) { 369 // If we´re not showing the last image, call the next 370 if ( settings.activeImage != ( settings.imageArray.length - 1 ) ) { 371 settings.activeImage = settings.activeImage + 1; 372 _set_image_to_view(); 373 _disable_keyboard_navigation(); 374 } 375 } 376 } 377 /** 378 * Preload prev and next images being showed 379 * 380 */ 381 function _preload_neighbor_images() { 382 if ( (settings.imageArray.length -1) > settings.activeImage ) { 383 objNext = new Image(); 384 objNext.src = settings.imageArray[settings.activeImage + 1][0]; 385 } 386 if ( settings.activeImage > 0 ) { 387 objPrev = new Image(); 388 objPrev.src = settings.imageArray[settings.activeImage -1][0]; 389 } 390 } 391 /** 392 * Remove jQuery lightBox plugin HTML markup 393 * 394 */ 395 function _finish() { 396 $('#jquery-lightbox').remove(); 397 $('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); }); 398 // Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay. 399 $('embed, object, select').css({ 'visibility' : 'visible' }); 400 } 401 /** 402 / THIRD FUNCTION 403 * getPageSize() by quirksmode.com 404 * 405 * @return Array Return an array with page width, height and window width, height 406 */ 407 function ___getPageSize() { 408 var xScroll, yScroll; 409 if (window.innerHeight && window.scrollMaxY) { 410 xScroll = window.innerWidth + window.scrollMaxX; 411 yScroll = window.innerHeight + window.scrollMaxY; 412 } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 413 xScroll = document.body.scrollWidth; 414 yScroll = document.body.scrollHeight; 415 } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 416 xScroll = document.body.offsetWidth; 417 yScroll = document.body.offsetHeight; 418 } 419 var windowWidth, windowHeight; 420 if (self.innerHeight) { // all except Explorer 421 if(document.documentElement.clientWidth){ 422 windowWidth = document.documentElement.clientWidth; 423 } else { 424 windowWidth = self.innerWidth; 425 } 426 windowHeight = self.innerHeight; 427 } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 428 windowWidth = document.documentElement.clientWidth; 429 windowHeight = document.documentElement.clientHeight; 430 } else if (document.body) { // other Explorers 431 windowWidth = document.body.clientWidth; 432 windowHeight = document.body.clientHeight; 433 } 434 // for small pages with total height less then height of the viewport 435 if(yScroll < windowHeight){ 436 pageHeight = windowHeight; 437 } else { 438 pageHeight = yScroll; 439 } 440 // for small pages with total width less then width of the viewport 441 if(xScroll < windowWidth){ 442 pageWidth = xScroll; 443 } else { 444 pageWidth = windowWidth; 445 } 446 arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight); 447 return arrayPageSize; 448 }; 449 /** 450 / THIRD FUNCTION 451 * getPageScroll() by quirksmode.com 452 * 453 * @return Array Return an array with x,y page scroll values. 454 */ 455 function ___getPageScroll() { 456 var xScroll, yScroll; 457 if (self.pageYOffset) { 458 yScroll = self.pageYOffset; 459 xScroll = self.pageXOffset; 460 } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict 461 yScroll = document.documentElement.scrollTop; 462 xScroll = document.documentElement.scrollLeft; 463 } else if (document.body) {// all other Explorers 464 yScroll = document.body.scrollTop; 465 xScroll = document.body.scrollLeft; 466 } 467 arrayPageScroll = new Array(xScroll,yScroll); 468 return arrayPageScroll; 469 }; 470 /** 471 * Stop the code execution from a escified time in milisecond 472 * 473 */ 474 function ___pause(ms) { 475 var date = new Date(); 476 curDate = null; 477 do { var curDate = new Date(); } 478 while ( curDate - date < ms); 479 }; 480 // Return the jQuery object for chaining. The unbind method is used to avoid click conflict when the plugin is called more than once 481 return this.unbind('click').click(_initialize); 482 }; 483})(jQuery); // Call and execute the function immediately passing the jQuery object
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.