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