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