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