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