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.5, // (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: 0, // (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: 'ФоÑо', // (string) Specify text "Image" 40 txtOf: 'из', // (string) Specify text "of" 41 // Configuration related to keyboard navigation 42 keyToClose: 'x', // (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-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 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>'); 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 _show_image(); 214 $('#lightbox-container-image-data-box').css({ width: intImageWidth }); 215 $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) }); 216 }; 217 /** 218 * Show the prepared image 219 * 220 */ 221 function _show_image() { 222 $('#lightbox-loading').hide(); 223 _preload_neighbor_images(); 224 $('#lightbox-image').fadeIn(500); 225 _show_image_data(); 226 _set_navigation(); 227 }; 228 /** 229 * Show the image information 230 * 231 */ 232 function _show_image_data() { 233 $('#lightbox-container-image-data-box').show(); 234 $('#lightbox-image-details-caption').show(); 235 if ( settings.imageArray[settings.activeImage][1] ) { 236 $('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show(); 237 } 238 // If we have a image set, display 'Image X of X' 239 if ( settings.imageArray.length > 1 ) { 240 $('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show(); 241 } 242 } 243 /** 244 * Display the button navigations 245 * 246 */ 247 function _set_navigation() { 248 $('#lightbox-nav').show(); 249 250 // Instead to define this configuration in CSS file, we define here. And itÒs need to IE. Just. 251 $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); 252 253 // Show the prev button, if not the first image in set 254 if ( settings.activeImage != 0 ) { 255 if ( settings.fixedNavigation ) { 256 $('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' }) 257 .unbind() 258 .bind('click',function() { 259 settings.activeImage = settings.activeImage - 1; 260 _set_image_to_view(); 261 return false; 262 }); 263 } else { 264 // Show the images button for Next buttons 265 $('#lightbox-nav-btnPrev').unbind().hover(function() { 266 $(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' }); 267 },function() { 268 $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); 269 }).show().bind('click',function() { 270 settings.activeImage = settings.activeImage - 1; 271 _set_image_to_view(); 272 return false; 273 }); 274 } 275 } 276 277 // Show the next button, if not the last image in set 278 if ( settings.activeImage != ( settings.imageArray.length -1 ) ) { 279 if ( settings.fixedNavigation ) { 280 $('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' }) 281 .unbind() 282 .bind('click',function() { 283 settings.activeImage = settings.activeImage + 1; 284 _set_image_to_view(); 285 return false; 286 }); 287 } else { 288 // Show the images button for Next buttons 289 $('#lightbox-nav-btnNext').unbind().hover(function() { 290 $(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' }); 291 },function() { 292 $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); 293 }).show().bind('click',function() { 294 settings.activeImage = settings.activeImage + 1; 295 _set_image_to_view(); 296 return false; 297 }); 298 } 299 } 300 // Enable keyboard navigation 301 _enable_keyboard_navigation(); 302 } 303 /** 304 * Enable a support to keyboard navigation 305 * 306 */ 307 function _enable_keyboard_navigation() { 308 $(document).keydown(function(objEvent) { 309 _keyboard_action(objEvent); 310 }); 311 } 312 /** 313 * Disable the support to keyboard navigation 314 * 315 */ 316 function _disable_keyboard_navigation() { 317 $(document).unbind(); 318 } 319 /** 320 * Perform the keyboard actions 321 * 322 */ 323 function _keyboard_action(objEvent) { 324 // To ie 325 if ( objEvent == null ) { 326 keycode = event.keyCode; 327 escapeKey = 27; 328 // To Mozilla 329 } else { 330 keycode = objEvent.keyCode; 331 escapeKey = objEvent.DOM_VK_ESCAPE; 332 } 333 // Get the key in lower case form 334 key = String.fromCharCode(keycode).toLowerCase(); 335 // Verify the keys to close the ligthBox 336 if ( ( key == settings.keyToClose ) || ( key == 'x' ) || ( keycode == escapeKey ) ) { 337 _finish(); 338 }
339 // Verify the key to show the previous image 340 if ( ( key == settings.keyToPrev ) || ( keycode == 37 ) ) { 341 // If weÒre not showing the first image, call the previous 342 if ( settings.activeImage != 0 ) { 343 settings.activeImage = settings.activeImage - 1; 344 _set_image_to_view(); 345 _disable_keyboard_navigation(); 346 } 347 } 348 // Verify the key to show the next image 349 if ( ( key == settings.keyToNext ) || ( keycode == 39 ) ) { 350 // If weÒre not showing the last image, call the next 351 if ( settings.activeImage != ( settings.imageArray.length - 1 ) ) { 352 settings.activeImage = settings.activeImage + 1; 353 _set_image_to_view(); 354 _disable_keyboard_navigation(); 355 } 356 } 357 } 358 /** 359 * Preload prev and next images being showed 360 * 361 */ 362 function _preload_neighbor_images() { 363 if ( (settings.imageArray.length -1) > settings.activeImage ) { 364 objNext = new Image(); 365 objNext.src = settings.imageArray[settings.activeImage + 1][0]; 366 } 367 if ( settings.activeImage > 0 ) { 368 objPrev = new Image(); 369 objPrev.src = settings.imageArray[settings.activeImage -1][0]; 370 } 371 } 372 /** 373 * Remove jQuery lightBox plugin HTML markup 374 * 375 */ 376 function _finish() { 377 $('#jquery-lightbox').remove(); 378 $('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); }); 379 // Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay. 380 $('embed, object, select').css({ 'visibility' : 'visible' }); 381 } 382 /** 383 / THIRD FUNCTION 384 * getPageSize() by quirksmode.com 385 * 386 * @return Array Return an array with page width, height and window width, height 387 */ 388 function ___getPageSize() { 389 var xScroll, yScroll; 390 if (window.innerHeight && window.scrollMaxY) { 391 xScroll = window.innerWidth + window.scrollMaxX; 392 yScroll = window.innerHeight + window.scrollMaxY; 393 } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 394 xScroll = document.body.scrollWidth; 395 yScroll = document.body.scrollHeight; 396 } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 397 xScroll = document.body.offsetWidth; 398 yScroll = document.body.offsetHeight; 399 } 400 var windowWidth, windowHeight; 401 if (self.innerHeight) { // all except Explorer 402 if(document.documentElement.clientWidth){ 403 windowWidth = document.documentElement.clientWidth; 404 } else { 405 windowWidth = self.innerWidth; 406 } 407 windowHeight = self.innerHeight; 408 } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 409 windowWidth = document.documentElement.clientWidth; 410 windowHeight = document.documentElement.clientHeight; 411 } else if (document.body) { // other Explorers 412 windowWidth = document.body.clientWidth; 413 windowHeight = document.body.clientHeight; 414 } 415 // for small pages with total height less then height of the viewport 416 if(yScroll < windowHeight){ 417 pageHeight = windowHeight; 418 } else { 419 pageHeight = yScroll; 420 } 421 // for small pages with total width less then width of the viewport 422 if(xScroll < windowWidth){ 423 pageWidth = xScroll; 424 } else { 425 pageWidth = windowWidth; 426 } 427 arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight); 428 return arrayPageSize; 429 }; 430 /** 431 / THIRD FUNCTION 432 * getPageScroll() by quirksmode.com 433 * 434 * @return Array Return an array with x,y page scroll values. 435 */ 436 function ___getPageScroll() { 437 var xScroll, yScroll; 438 if (self.pageYOffset) { 439 yScroll = self.pageYOffset; 440 xScroll = self.pageXOffset; 441 } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict 442 yScroll = document.documentElement.scrollTop; 443 xScroll = document.documentElement.scrollLeft; 444 } else if (document.body) {// all other Explorers 445 yScroll = document.body.scrollTop; 446 xScroll = document.body.scrollLeft; 447 } 448 arrayPageScroll = new Array(xScroll,yScroll); 449 return arrayPageScroll; 450 }; 451 /** 452 * Stop the code execution from a escified time in milisecond 453 * 454 */ 455 function ___pause(ms) { 456 var date = new Date(); 457 curDate = null; 458 do { var curDate = new Date(); } 459 while ( curDate - date < ms); 460 }; 461 // Return the jQuery object for chaining. The unbind method is used to avoid click conflict when the plugin is called more than once 462 return this.unbind('click').click(_initialize); 463 }; 464})(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.