lightbox2/js/lightbox.js

   1 // -----------------------------------------------------------------------------------
   2 //
   3 //      Lightbox v2.04
   4 //      by Lokesh Dhakar - http://www.lokeshdhakar.com
   5 //      Last Modification: 2/9/08
   6 //
   7 //      For more information, visit:
   8 //      http://lokeshdhakar.com/projects/lightbox2/
   9 //
  10 //      Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
  11 //      - Free for use in both personal and commercial projects
  12 //              - Attribution requires leaving author name, author link, and the license info intact.
  13 //
  14 //  Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
  15 //              Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
  16 //
  17 // -----------------------------------------------------------------------------------
  18 /*
  19
  20     Table of Contents
  21     -----------------
  22     Configuration
  23
  24     Lightbox Class Declaration
  25     - initialize()
  26     - updateImageList()
  27     - start()
  28     - changeImage()
  29     - resizeImageContainer()
  30     - showImage()
  31     - updateDetails()
  32     - updateNav()
  33     - enableKeyboardNav()
  34     - disableKeyboardNav()
  35     - keyboardAction()
  36     - preloadNeighborImages()
  37     - end()
  38
  39     Function Calls
  40     - document.observe()
  41
  42 */
  43 // -----------------------------------------------------------------------------------
  44
  45 //
  46 //  Configurationl
  47 //
  48 LightboxOptions = Object.extend({
  49     fileLoadingImage:        'lightbox2/images/loading.gif',
  50     fileBottomNavCloseImage: 'lightbox2/images/closelabel.gif',
  51
  52     overlayOpacity: 0.8,   // controls transparency of shadow overlay
  53
  54     animate: true,         // toggles resizing animations
  55     resizeSpeed: 9,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)
  56
  57     borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable
  58
  59         // When grouping images this is used to write: Image # of #.
  60         // Change it for non-english localization
  61         labelImage: "Image",
  62         labelOf: "of"
  63 }, window.LightboxOptions || {});
  64
  65 // -----------------------------------------------------------------------------------
  66
  67 var Lightbox = Class.create();
  68
  69 Lightbox.prototype = {
  70     imageArray: [],
  71     activeImage: undefined,
  72
  73     // initialize()
  74     // Constructor runs on completion of the DOM loading. Calls updateImageList and then
  75     // the function inserts html at the bottom of the page which is used to display the shadow
  76     // overlay and the image container.
  77     //
  78     initialize: function() {
  79
  80         this.updateImageList();
  81
  82         this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
  83
  84         if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
  85         if (LightboxOptions.resizeSpeed < 1)  LightboxOptions.resizeSpeed = 1;
  86
  87             this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
  88             this.overlayDuration = LightboxOptions.animate ? 0.2 : 0;  // shadow fade in/out duration
  89
  90         // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
  91         // If animations are turned off, it will be hidden as to prevent a flicker of a
  92         // white 250 by 250 box.
  93         var size = (LightboxOptions.animate ? 250 : 1) + 'px';
  94
  95
  96         // Code inserts html at the bottom of the page that looks similar to this:
  97         //
  98         //  <div id="overlay"></div>
  99         //  <div id="lightbox">
 100         //      <div id="outerImageContainer">
 101         //          <div id="imageContainer">
 102         //              <img id="lightboxImage">
 103         //              <div style="" id="hoverNav">
 104         //                  <a href="#" id="prevLink"></a>
 105         //                  <a href="#" id="nextLink"></a>
 106         //              </div>
 107         //              <div id="loading">
 108         //                  <a href="#" id="loadingLink">
 109         //                      <img src="images/loading.gif">
 110         //                  </a>
 111         //              </div>
 112         //          </div>
 113         //      </div>
 114         //      <div id="imageDataContainer">
 115         //          <div id="imageData">
 116         //              <div id="imageDetails">
 117         //                  <span id="caption"></span>
 118         //                  <span id="numberDisplay"></span>
 119         //              </div>
 120         //              <div id="bottomNav">
 121         //                  <a href="#" id="bottomNavClose">
 122         //                      <img src="images/close.gif">
 123         //                  </a>
 124         //              </div>
 125         //          </div>
 126         //      </div>
 127         //  </div>
 128
 129
 130         var objBody = $$('body')[0];
 131
 132                 objBody.appendChild(Builder.node('div',{id:'overlay'}));
 133
 134         objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
 135             Builder.node('div',{id:'outerImageContainer'},
 136                 Builder.node('div',{id:'imageContainer'}, [
 137                     Builder.node('img',{id:'lightboxImage'}),
 138                     Builder.node('div',{id:'hoverNav'}, [
 139                         Builder.node('a',{id:'prevLink', href: '#' }),
 140                         Builder.node('a',{id:'nextLink', href: '#' })
 141                     ]),
 142                     Builder.node('div',{id:'loading'},
 143                         Builder.node('a',{id:'loadingLink', href: '#' },
 144                             Builder.node('img', {src: LightboxOptions.fileLoadingImage})
 145                         )
 146                     )
 147                 ])
 148             ),
 149             Builder.node('div', {id:'imageDataContainer'},
 150                 Builder.node('div',{id:'imageData'}, [
 151                     Builder.node('div',{id:'imageDetails'}, [
 152                         Builder.node('span',{id:'caption'}),
 153                         Builder.node('span',{id:'numberDisplay'})
 154                     ]),
 155                     Builder.node('div',{id:'bottomNav'},
 156                         Builder.node('a',{id:'bottomNavClose', href: '#' },
 157                             Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
 158                         )
 159                     )
 160                 ])
 161             )
 162         ]));
 163
 164
 165                 $('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
 166                 $('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
 167                 $('outerImageContainer').setStyle({ width: size, height: size });
 168                 $('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
 169                 $('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
 170                 $('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
 171                 $('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
 172
 173         var th = this;
 174         (function(){
 175             var ids =
 176                 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
 177                 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
 178             $w(ids).each(function(id){ th[id] = $(id); });
 179         }).defer();
 180     },
 181
 182     //
 183     // updateImageList()
 184     // Loops through anchor tags looking for 'lightbox' references and applies onclick
 185     // events to appropriate links. You can rerun after dynamically adding images w/ajax.
 186     //
 187     updateImageList: function() {
 188         this.updateImageList = Prototype.emptyFunction;
 189
 190         document.observe('click', (function(event){
 191             var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
 192             if (target) {
 193                 event.stop();
 194                 this.start(target);
 195             }
 196         }).bind(this));
 197     },
 198
 199     //
 200     //  start()
 201     //  Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
 202     //
 203     start: function(imageLink) {
 204
 205         $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
 206
 207         // stretch overlay to fill page and fade in
 208         var arrayPageSize = this.getPageSize();
 209         $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
 210
 211         new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
 212
 213         this.imageArray = [];
 214         var imageNum = 0;
 215
 216         if ((imageLink.rel == 'lightbox')){
 217             // if image is NOT part of a set, add single image to imageArray
 218             this.imageArray.push([imageLink.href, imageLink.title]);
 219         } else {
 220             // if image is part of a set..
 221             this.imageArray =
 222                 $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
 223                 collect(function(anchor){ return [anchor.href, anchor.title]; }).
 224                 uniq();
 225
 226             while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
 227         }
 228
 229         // calculate top and left offset for the lightbox
 230         var arrayPageScroll = document.viewport.getScrollOffsets();
 231         var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
 232         var lightboxLeft = arrayPageScroll[0];
 233         this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
 234
 235         this.changeImage(imageNum);
 236     },
 237
 238     //
 239     //  changeImage()
 240     //  Hide most elements and preload image in preparation for resizing image container.
 241     //
 242     changeImage: function(imageNum) {
 243
 244         this.activeImage = imageNum; // update global var
 245
 246         // hide elements during transition
 247         if (LightboxOptions.animate) this.loading.show();
 248         this.lightboxImage.hide();
 249         this.hoverNav.hide();
 250         this.prevLink.hide();
 251         this.nextLink.hide();
 252                 // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
 253         this.imageDataContainer.setStyle({opacity: .0001});
 254         this.numberDisplay.hide();
 255
 256         var imgPreloader = new Image();
 257
 258         // once image is preloaded, resize image container
 259
 260
 261         imgPreloader.onload = (function(){
 262             this.lightboxImage.src = this.imageArray[this.activeImage][0];
 263             this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
 264         }).bind(this);
 265         imgPreloader.src = this.imageArray[this.activeImage][0];
 266     },
 267
 268     //
 269     //  resizeImageContainer()
 270     //
 271     resizeImageContainer: function(imgWidth, imgHeight) {
 272
 273         // get current width and height
 274         var widthCurrent  = this.outerImageContainer.getWidth();
 275         var heightCurrent = this.outerImageContainer.getHeight();
 276
 277         // get new width and height
 278         var widthNew  = (imgWidth  + LightboxOptions.borderSize * 2);
 279         var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
 280
 281         // scalars based on change from old to new
 282         var xScale = (widthNew  / widthCurrent)  * 100;
 283         var yScale = (heightNew / heightCurrent) * 100;
 284
 285         // calculate size difference between new and old image, and resize if necessary
 286         var wDiff = widthCurrent - widthNew;
 287         var hDiff = heightCurrent - heightNew;
 288
 289         if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
 290         if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
 291
 292         // if new and old image are same size and no scaling transition is necessary,
 293         // do a quick pause to prevent image flicker.
 294         var timeout = 0;
 295         if ((hDiff == 0) && (wDiff == 0)){
 296             timeout = 100;
 297             if (Prototype.Browser.IE) timeout = 250;
 298         }
 299
 300         (function(){
 301             this.prevLink.setStyle({ height: imgHeight + 'px' });
 302             this.nextLink.setStyle({ height: imgHeight + 'px' });
 303             this.imageDataContainer.setStyle({ width: widthNew + 'px' });
 304
 305             this.showImage();
 306         }).bind(this).delay(timeout / 1000);
 307     },
 308
 309     //
 310     //  showImage()
 311     //  Display image and begin preloading neighbors.
 312     //
 313     showImage: function(){
 314         this.loading.hide();
 315         new Effect.Appear(this.lightboxImage, {
 316             duration: this.resizeDuration,
 317             queue: 'end',
 318             afterFinish: (function(){ this.updateDetails(); }).bind(this)
 319         });
 320         this.preloadNeighborImages();
 321     },
 322
 323     //
 324     //  updateDetails()
 325     //  Display caption, image number, and bottom nav.
 326     //
 327     updateDetails: function() {
 328
 329         // if caption is not null
 330         if (this.imageArray[this.activeImage][1] != ""){
 331             this.caption.update(this.imageArray[this.activeImage][1]).show();
 332         }
 333
 334         // if image is part of set display 'Image x of x'
 335         if (this.imageArray.length > 1){
 336             this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + '  ' + this.imageArray.length).show();
 337         }
 338
 339         new Effect.Parallel(
 340             [
 341                 new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
 342                 new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
 343             ],
 344             {
 345                 duration: this.resizeDuration,
 346                 afterFinish: (function() {
 347                         // update overlay size and update nav
 348                         var arrayPageSize = this.getPageSize();
 349                         this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
 350                         this.updateNav();
 351                 }).bind(this)
 352             }
 353         );
 354     },
 355
 356     //
 357     //  updateNav()
 358     //  Display appropriate previous and next hover navigation.
 359     //
 360     updateNav: function() {
 361
 362         this.hoverNav.show();
 363
 364         // if not first image in set, display prev image button
 365         if (this.activeImage > 0) this.prevLink.show();
 366
 367         // if not last image in set, display next image button
 368         if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
 369
 370         this.enableKeyboardNav();
 371     },
 372
 373     //
 374     //  enableKeyboardNav()
 375     //
 376     enableKeyboardNav: function() {
 377         document.observe('keydown', this.keyboardAction);
 378     },
 379
 380     //
 381     //  disableKeyboardNav()
 382     //
 383     disableKeyboardNav: function() {
 384         document.stopObserving('keydown', this.keyboardAction);
 385     },
 386
 387     //
 388     //  keyboardAction()
 389     //
 390     keyboardAction: function(event) {
 391         var keycode = event.keyCode;
 392
 393         var escapeKey;
 394         if (event.DOM_VK_ESCAPE) {  // mozilla
 395             escapeKey = event.DOM_VK_ESCAPE;
 396         } else { // ie
 397             escapeKey = 27;
 398         }
 399
 400         var key = String.fromCharCode(keycode).toLowerCase();
 401
 402         if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
 403             this.end();
 404         } else if ((key == 'p') || (keycode == 37)){ // display previous image
 405             if (this.activeImage != 0){
 406                 this.disableKeyboardNav();
 407                 this.changeImage(this.activeImage - 1);
 408             }
 409         } else if ((key == 'n') || (keycode == 39)){ // display next image
 410             if (this.activeImage != (this.imageArray.length - 1)){
 411                 this.disableKeyboardNav();
 412                 this.changeImage(this.activeImage + 1);
 413             }
 414         }
 415     },
 416
 417     //
 418     //  preloadNeighborImages()
 419     //  Preload previous and next images.
 420     //
 421     preloadNeighborImages: function(){
 422         var preloadNextImage, preloadPrevImage;
 423         if (this.imageArray.length > this.activeImage + 1){
 424             preloadNextImage = new Image();
 425             preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
 426         }
 427         if (this.activeImage > 0){
 428             preloadPrevImage = new Image();
 429             preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
 430         }
 431
 432     },
 433
 434     //
 435     //  end()
 436     //
 437     end: function() {
 438         this.disableKeyboardNav();
 439         this.lightbox.hide();
 440         new Effect.Fade(this.overlay, { duration: this.overlayDuration });
 441         $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
 442     },
 443
 444     //
 445     //  getPageSize()
 446     //
 447     getPageSize: function() {
 448
 449              var xScroll, yScroll;
 450
 451                 if (window.innerHeight && window.scrollMaxY) {
 452                         xScroll = window.innerWidth + window.scrollMaxX;
 453                         yScroll = window.innerHeight + window.scrollMaxY;
 454                 } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
 455                         xScroll = document.body.scrollWidth;
 456                         yScroll = document.body.scrollHeight;
 457                 } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
 458                         xScroll = document.body.offsetWidth;
 459                         yScroll = document.body.offsetHeight;
 460                 }
 461
 462                 var windowWidth, windowHeight;
 463
 464                 if (self.innerHeight) { // all except Explorer
 465                         if(document.documentElement.clientWidth){
 466                                 windowWidth = document.documentElement.clientWidth;
 467                         } else {
 468                                 windowWidth = self.innerWidth;
 469                         }
 470                         windowHeight = self.innerHeight;
 471                 } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
 472                         windowWidth = document.documentElement.clientWidth;
 473                         windowHeight = document.documentElement.clientHeight;
 474                 } else if (document.body) { // other Explorers
 475                         windowWidth = document.body.clientWidth;
 476                         windowHeight = document.body.clientHeight;
 477                 }
 478
 479                 // for small pages with total height less then height of the viewport
 480                 if(yScroll < windowHeight){
 481                         pageHeight = windowHeight;
 482                 } else {
 483                         pageHeight = yScroll;
 484                 }
 485
 486                 // for small pages with total width less then width of the viewport
 487                 if(xScroll < windowWidth){
 488                         pageWidth = xScroll;
 489                 } else {
 490                         pageWidth = windowWidth;
 491                 }
 492
 493                 return [pageWidth,pageHeight];
 494         }
 495 }
 496
 497 document.observe('dom:loaded', function () { new Lightbox(); });