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