js/jquery.lightbox.js

   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:                   'img/lightbox-ico-loading.gif',         // (string) Path and the name of the loading icon
  31                         imageBtnPrev:                   'img/lightbox-btn-prev.gif',                    // (string) Path and the name of the prev button image
  32                         imageBtnNext:                   'img/lightbox-btn-next.gif',                    // (string) Path and the name of the next button image
  33                         imageBtnClose:                  'img/lightbox-btn-close.gif',           // (string) Path and the name of the close btn
  34                         imageBlank:                             'img/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="../img/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="../img/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