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