prawokultury/static/contrib/lightbox/js/lightbox.js

   1 /**
   2  * Lightbox v2.7.1
   3  * by Lokesh Dhakar - http://lokeshdhakar.com/projects/lightbox2/
   4  *
   5  * @license http://creativecommons.org/licenses/by/2.5/
   6  * - Free for use in both personal and commercial projects
   7  * - Attribution requires leaving author name, author link, and the license info intact
   8  */
   9
  10 (function() {
  11   // Use local alias
  12   var $ = jQuery;
  13
  14   var LightboxOptions = (function() {
  15     function LightboxOptions() {
  16       this.fadeDuration                = 500;
  17       this.fitImagesInViewport         = true;
  18       this.resizeDuration              = 700;
  19       this.positionFromTop             = 50;
  20       this.showImageNumberLabel        = true;
  21       this.alwaysShowNavOnTouchDevices = false;
  22       this.wrapAround                  = false;
  23     }
  24
  25     // Change to localize to non-english language
  26     LightboxOptions.prototype.albumLabel = function(curImageNum, albumSize) {
  27       return "Image " + curImageNum + " of " + albumSize;
  28     };
  29
  30     return LightboxOptions;
  31   })();
  32
  33
  34   var Lightbox = (function() {
  35     function Lightbox(options) {
  36       this.options           = options;
  37       this.album             = [];
  38       this.currentImageIndex = void 0;
  39       this.init();
  40     }
  41
  42     Lightbox.prototype.init = function() {
  43       this.enable();
  44       this.build();
  45     };
  46
  47     // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
  48     // that contain 'lightbox'. When these are clicked, start lightbox.
  49     Lightbox.prototype.enable = function() {
  50       var self = this;
  51       $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
  52         self.start($(event.currentTarget));
  53         return false;
  54       });
  55     };
  56
  57     // Build html for the lightbox and the overlay.
  58     // Attach event handlers to the new DOM elements. click click click
  59     Lightbox.prototype.build = function() {
  60       var self = this;
  61       $("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo($('body'));
  62
  63       // Cache jQuery objects
  64       this.$lightbox       = $('#lightbox');
  65       this.$overlay        = $('#lightboxOverlay');
  66       this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
  67       this.$container      = this.$lightbox.find('.lb-container');
  68
  69       // Store css values for future lookup
  70       this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
  71       this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
  72       this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
  73       this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
  74
  75       // Attach event handlers to the newly minted DOM elements
  76       this.$overlay.hide().on('click', function() {
  77         self.end();
  78         return false;
  79       });
  80
  81       this.$lightbox.hide().on('click', function(event) {
  82         if ($(event.target).attr('id') === 'lightbox') {
  83           self.end();
  84         }
  85         return false;
  86       });
  87
  88       this.$outerContainer.on('click', function(event) {
  89         if ($(event.target).attr('id') === 'lightbox') {
  90           self.end();
  91         }
  92         return false;
  93       });
  94
  95       this.$lightbox.find('.lb-prev').on('click', function() {
  96         if (self.currentImageIndex === 0) {
  97           self.changeImage(self.album.length - 1);
  98         } else {
  99           self.changeImage(self.currentImageIndex - 1);
 100         }
 101         return false;
 102       });
 103
 104       this.$lightbox.find('.lb-next').on('click', function() {
 105         if (self.currentImageIndex === self.album.length - 1) {
 106           self.changeImage(0);
 107         } else {
 108           self.changeImage(self.currentImageIndex + 1);
 109         }
 110         return false;
 111       });
 112
 113       this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
 114         self.end();
 115         return false;
 116       });
 117     };
 118
 119     // Show overlay and lightbox. If the image is part of a set, add siblings to album array.
 120     Lightbox.prototype.start = function($link) {
 121       var self    = this;
 122       var $window = $(window);
 123
 124       $window.on('resize', $.proxy(this.sizeOverlay, this));
 125
 126       $('select, object, embed').css({
 127         visibility: "hidden"
 128       });
 129
 130       this.sizeOverlay();
 131
 132       this.album = [];
 133       var imageNumber = 0;
 134
 135       function addToAlbum($link) {
 136         self.album.push({
 137           link: $link.attr('href'),
 138           title: $link.attr('data-title') || $link.attr('title')
 139         });
 140       }
 141
 142       // Support both data-lightbox attribute and rel attribute implementations
 143       var dataLightboxValue = $link.attr('data-lightbox');
 144       var $links;
 145
 146       if (dataLightboxValue) {
 147         $links = $($link.prop("tagName") + '[data-lightbox="' + dataLightboxValue + '"]');
 148         for (var i = 0; i < $links.length; i = ++i) {
 149           addToAlbum($($links[i]));
 150           if ($links[i] === $link[0]) {
 151             imageNumber = i;
 152           }
 153         }
 154       } else {
 155         if ($link.attr('rel') === 'lightbox') {
 156           // If image is not part of a set
 157           addToAlbum($link);
 158         } else {
 159           // If image is part of a set
 160           $links = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
 161           for (var j = 0; j < $links.length; j = ++j) {
 162             addToAlbum($($links[j]));
 163             if ($links[j] === $link[0]) {
 164               imageNumber = j;
 165             }
 166           }
 167         }
 168       }
 169
 170       // Position Lightbox
 171       var top  = $window.scrollTop() + this.options.positionFromTop;
 172       var left = $window.scrollLeft();
 173       this.$lightbox.css({
 174         top: top + 'px',
 175         left: left + 'px'
 176       }).fadeIn(this.options.fadeDuration);
 177
 178       this.changeImage(imageNumber);
 179     };
 180
 181     // Hide most UI elements in preparation for the animated resizing of the lightbox.
 182     Lightbox.prototype.changeImage = function(imageNumber) {
 183       var self = this;
 184
 185       this.disableKeyboardNav();
 186       var $image = this.$lightbox.find('.lb-image');
 187
 188       this.$overlay.fadeIn(this.options.fadeDuration);
 189
 190       $('.lb-loader').fadeIn('slow');
 191       this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
 192
 193       this.$outerContainer.addClass('animating');
 194
 195       // When image to show is preloaded, we send the width and height to sizeContainer()
 196       var preloader = new Image();
 197       preloader.onload = function() {
 198         var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth;
 199         $image.attr('src', self.album[imageNumber].link);
 200
 201         $preloader = $(preloader);
 202
 203         $image.width(preloader.width);
 204         $image.height(preloader.height);
 205
 206         if (self.options.fitImagesInViewport) {
 207           // Fit image inside the viewport.
 208           // Take into account the border around the image and an additional 10px gutter on each side.
 209
 210           windowWidth    = $(window).width();
 211           windowHeight   = $(window).height();
 212           maxImageWidth  = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
 213           maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;
 214
 215           // Is there a fitting issue?
 216           if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
 217             if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
 218               imageWidth  = maxImageWidth;
 219               imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
 220               $image.width(imageWidth);
 221               $image.height(imageHeight);
 222             } else {
 223               imageHeight = maxImageHeight;
 224               imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
 225               $image.width(imageWidth);
 226               $image.height(imageHeight);
 227             }
 228           }
 229         }
 230         self.sizeContainer($image.width(), $image.height());
 231       };
 232
 233       preloader.src          = this.album[imageNumber].link;
 234       this.currentImageIndex = imageNumber;
 235     };
 236
 237     // Stretch overlay to fit the viewport
 238     Lightbox.prototype.sizeOverlay = function() {
 239       this.$overlay
 240         .width($(window).width())
 241         .height($(document).height());
 242     };
 243
 244     // Animate the size of the lightbox to fit the image we are showing
 245     Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
 246       var self = this;
 247
 248       var oldWidth  = this.$outerContainer.outerWidth();
 249       var oldHeight = this.$outerContainer.outerHeight();
 250       var newWidth  = imageWidth + this.containerLeftPadding + this.containerRightPadding;
 251       var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
 252
 253       function postResize() {
 254         self.$lightbox.find('.lb-dataContainer').width(newWidth);
 255         self.$lightbox.find('.lb-prevLink').height(newHeight);
 256         self.$lightbox.find('.lb-nextLink').height(newHeight);
 257         self.showImage();
 258       }
 259
 260       if (oldWidth !== newWidth || oldHeight !== newHeight) {
 261         this.$outerContainer.animate({
 262           width: newWidth,
 263           height: newHeight
 264         }, this.options.resizeDuration, 'swing', function() {
 265           postResize();
 266         });
 267       } else {
 268         postResize();
 269       }
 270     };
 271
 272     // Display the image and it's details and begin preload neighboring images.
 273     Lightbox.prototype.showImage = function() {
 274       this.$lightbox.find('.lb-loader').hide();
 275       this.$lightbox.find('.lb-image').fadeIn('slow');
 276
 277       this.updateNav();
 278       this.updateDetails();
 279       this.preloadNeighboringImages();
 280       this.enableKeyboardNav();
 281     };
 282
 283     // Display previous and next navigation if appropriate.
 284     Lightbox.prototype.updateNav = function() {
 285       // Check to see if the browser supports touch events. If so, we take the conservative approach
 286       // and assume that mouse hover events are not supported and always show prev/next navigation
 287       // arrows in image sets.
 288       var alwaysShowNav = false;
 289       try {
 290         document.createEvent("TouchEvent");
 291         alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices)? true: false;
 292       } catch (e) {}
 293
 294       this.$lightbox.find('.lb-nav').show();
 295
 296       if (this.album.length > 1) {
 297         if (this.options.wrapAround) {
 298           if (alwaysShowNav) {
 299             this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
 300           }
 301           this.$lightbox.find('.lb-prev, .lb-next').show();
 302         } else {
 303           if (this.currentImageIndex > 0) {
 304             this.$lightbox.find('.lb-prev').show();
 305             if (alwaysShowNav) {
 306               this.$lightbox.find('.lb-prev').css('opacity', '1');
 307             }
 308           }
 309           if (this.currentImageIndex < this.album.length - 1) {
 310             this.$lightbox.find('.lb-next').show();
 311             if (alwaysShowNav) {
 312               this.$lightbox.find('.lb-next').css('opacity', '1');
 313             }
 314           }
 315         }
 316       }
 317     };
 318
 319     // Display caption, image number, and closing button.
 320     Lightbox.prototype.updateDetails = function() {
 321       var self = this;
 322
 323       // Enable anchor clicks in the injected caption html.
 324       // Thanks Nate Wright for the fix. @https://github.com/NateWr
 325       if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
 326         this.$lightbox.find('.lb-caption')
 327           .html(this.album[this.currentImageIndex].title)
 328           .fadeIn('fast')
 329           .find('a').on('click', function(event){
 330             location.href = $(this).attr('href');
 331           });
 332       }
 333
 334       if (this.album.length > 1 && this.options.showImageNumberLabel) {
 335         this.$lightbox.find('.lb-number').text(this.options.albumLabel(this.currentImageIndex + 1, this.album.length)).fadeIn('fast');
 336       } else {
 337         this.$lightbox.find('.lb-number').hide();
 338       }
 339
 340       this.$outerContainer.removeClass('animating');
 341
 342       this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
 343         return self.sizeOverlay();
 344       });
 345     };
 346
 347     // Preload previous and next images in set.
 348     Lightbox.prototype.preloadNeighboringImages = function() {
 349       if (this.album.length > this.currentImageIndex + 1) {
 350         var preloadNext = new Image();
 351         preloadNext.src = this.album[this.currentImageIndex + 1].link;
 352       }
 353       if (this.currentImageIndex > 0) {
 354         var preloadPrev = new Image();
 355         preloadPrev.src = this.album[this.currentImageIndex - 1].link;
 356       }
 357     };
 358
 359     Lightbox.prototype.enableKeyboardNav = function() {
 360       $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
 361     };
 362
 363     Lightbox.prototype.disableKeyboardNav = function() {
 364       $(document).off('.keyboard');
 365     };
 366
 367     Lightbox.prototype.keyboardAction = function(event) {
 368       var KEYCODE_ESC        = 27;
 369       var KEYCODE_LEFTARROW  = 37;
 370       var KEYCODE_RIGHTARROW = 39;
 371
 372       var keycode = event.keyCode;
 373       var key     = String.fromCharCode(keycode).toLowerCase();
 374       if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
 375         this.end();
 376       } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
 377         if (this.currentImageIndex !== 0) {
 378           this.changeImage(this.currentImageIndex - 1);
 379         } else if (this.options.wrapAround && this.album.length > 1) {
 380           this.changeImage(this.album.length - 1);
 381         }
 382       } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
 383         if (this.currentImageIndex !== this.album.length - 1) {
 384           this.changeImage(this.currentImageIndex + 1);
 385         } else if (this.options.wrapAround && this.album.length > 1) {
 386           this.changeImage(0);
 387         }
 388       }
 389     };
 390
 391     // Closing time. :-(
 392     Lightbox.prototype.end = function() {
 393       this.disableKeyboardNav();
 394       $(window).off("resize", this.sizeOverlay);
 395       this.$lightbox.fadeOut(this.options.fadeDuration);
 396       this.$overlay.fadeOut(this.options.fadeDuration);
 397       $('select, object, embed').css({
 398         visibility: "visible"
 399       });
 400     };
 401
 402     return Lightbox;
 403
 404   })();
 405
 406   $(function() {
 407     var options  = new LightboxOptions();
 408     var lightbox = new Lightbox(options);
 409   });
 410
 411 }).call(this);