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