xp-dev.com Git - namibia/blob - public/js/vendor/lightbox.js

   1
   2 /*
   3 Lightbox v2.51
   4 by Lokesh Dhakar - http://www.lokeshdhakar.com
   5
   6 For more information, visit:
   7 http://lokeshdhakar.com/projects/lightbox2/
   8
   9 Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
  10 - free for use in both personal and commercial projects
  11 - attribution requires leaving author name, author link, and the license info intact
  12
  13 Thanks
  14 - 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 proto-aculous in v2.05.
  16
  17
  18 Table of Contents
  19 =================
  20 LightboxOptions
  21
  22 Lightbox
  23 - constructor
  24 - init
  25 - enable
  26 - build
  27 - start
  28 - changeImage
  29 - sizeContainer
  30 - showImage
  31 - updateNav
  32 - updateDetails
  33 - preloadNeigbhoringImages
  34 - enableKeyboardNav
  35 - disableKeyboardNav
  36 - keyboardAction
  37 - end
  38
  39 options = new LightboxOptions
  40 lightbox = new Lightbox options
  41 */
  42
  43 (function() {
  44   var $, Lightbox, LightboxOptions;
  45
  46   $ = jQuery;
  47
  48   LightboxOptions = (function() {
  49
  50     function LightboxOptions() {
  51       this.fileLoadingImage = 'images/loading.gif';
  52       this.fileCloseImage = 'images/close.png';
  53       this.resizeDuration = 700;
  54       this.fadeDuration = 500;
  55       this.labelImage = "Image";
  56       this.labelOf = "of";
  57     }
  58
  59     return LightboxOptions;
  60
  61   })();
  62
  63   Lightbox = (function() {
  64
  65     function Lightbox(options) {
  66       this.options = options;
  67       this.album = [];
  68       this.currentImageIndex = void 0;
  69       this.init();
  70     }
  71
  72     Lightbox.prototype.init = function() {
  73       this.enable();
  74       return this.build();
  75     };
  76
  77     Lightbox.prototype.enable = function() {
  78       var _this = this;
  79       return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {
  80         _this.start($(e.currentTarget));
  81         return false;
  82       });
  83     };
  84
  85     Lightbox.prototype.build = function() {
  86       var $lightbox,
  87         _this = this;
  88       $("<div>", {
  89         id: 'lightboxOverlay'
  90       }).after($('<div/>', {
  91         id: 'lightbox'
  92       }).append($('<div/>', {
  93         "class": 'lb-outerContainer'
  94       }).append($('<div/>', {
  95         "class": 'lb-container'
  96       }).append($('<img/>', {
  97         "class": 'lb-image'
  98       }), $('<div/>', {
  99         "class": 'lb-nav'
 100       }).append($('<a/>', {
 101         "class": 'lb-prev'
 102       }), $('<a/>', {
 103         "class": 'lb-next'
 104       })), $('<div/>', {
 105         "class": 'lb-loader'
 106       }).append($('<a/>', {
 107         "class": 'lb-cancel'
 108       }).append($('<img/>', {
 109         src: this.options.fileLoadingImage
 110       }))))), $('<div/>', {
 111         "class": 'lb-dataContainer'
 112       }).append($('<div/>', {
 113         "class": 'lb-data'
 114       }).append($('<div/>', {
 115         "class": 'lb-details'
 116       }).append($('<span/>', {
 117         "class": 'lb-caption'
 118       }), $('<span/>', {
 119         "class": 'lb-number'
 120       })), $('<div/>', {
 121         "class": 'lb-closeContainer'
 122       }).append($('<a/>', {
 123         "class": 'lb-close'
 124       }).append($('<img/>', {
 125         src: this.options.fileCloseImage
 126       }))))))).appendTo($('body'));
 127       $('#lightboxOverlay').hide().on('click', function(e) {
 128         _this.end();
 129         return false;
 130       });
 131       $lightbox = $('#lightbox');
 132       $lightbox.hide().on('click', function(e) {
 133         if ($(e.target).attr('id') === 'lightbox') _this.end();
 134         return false;
 135       });
 136       $lightbox.find('.lb-outerContainer').on('click', function(e) {
 137         if ($(e.target).attr('id') === 'lightbox') _this.end();
 138         return false;
 139       });
 140       $lightbox.find('.lb-prev').on('click', function(e) {
 141         _this.changeImage(_this.currentImageIndex - 1);
 142         return false;
 143       });
 144       $lightbox.find('.lb-next').on('click', function(e) {
 145         _this.changeImage(_this.currentImageIndex + 1);
 146         return false;
 147       });
 148       $lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
 149         _this.end();
 150         return false;
 151       });
 152     };
 153
 154     Lightbox.prototype.start = function($link) {
 155       var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
 156       $(window).on("resize", this.sizeOverlay);
 157       $('select, object, embed').css({
 158         visibility: "hidden"
 159       });
 160       $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
 161       this.album = [];
 162       imageNumber = 0;
 163       if ($link.attr('rel') === 'lightbox') {
 164         this.album.push({
 165           link: $link.attr('href'),
 166           title: $link.attr('title')
 167         });
 168       } else {
 169         _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
 170         for (i = 0, _len = _ref.length; i < _len; i++) {
 171           a = _ref[i];
 172           this.album.push({
 173             link: $(a).attr('href'),
 174             title: $(a).attr('title')
 175           });
 176           if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
 177         }
 178       }
 179       $window = $(window);
 180       top = $window.scrollTop() + $window.height() / 10;
 181       left = $window.scrollLeft();
 182       $lightbox = $('#lightbox');
 183       $lightbox.css({
 184         top: top + 'px',
 185         left: left + 'px'
 186       }).fadeIn(this.options.fadeDuration);
 187       this.changeImage(imageNumber);
 188     };
 189
 190     Lightbox.prototype.changeImage = function(imageNumber) {
 191       var $image, $lightbox, preloader,
 192         _this = this;
 193       this.disableKeyboardNav();
 194       $lightbox = $('#lightbox');
 195       $image = $lightbox.find('.lb-image');
 196       this.sizeOverlay();
 197       $('#lightboxOverlay').fadeIn(this.options.fadeDuration);
 198       $('.loader').fadeIn('slow');
 199       $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
 200       $lightbox.find('.lb-outerContainer').addClass('animating');
 201       preloader = new Image;
 202       preloader.onload = function() {
 203         $image.attr('src', _this.album[imageNumber].link);
 204         $image.width = preloader.width;
 205         $image.height = preloader.height;
 206         return _this.sizeContainer(preloader.width, preloader.height);
 207       };
 208       preloader.src = this.album[imageNumber].link;
 209       this.currentImageIndex = imageNumber;
 210     };
 211
 212     Lightbox.prototype.sizeOverlay = function() {
 213       return $('#lightboxOverlay').width($(document).width()).height($(document).height());
 214     };
 215
 216     Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
 217       var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth,
 218         _this = this;
 219       $lightbox = $('#lightbox');
 220       $outerContainer = $lightbox.find('.lb-outerContainer');
 221       oldWidth = $outerContainer.outerWidth();
 222       oldHeight = $outerContainer.outerHeight();
 223       $container = $lightbox.find('.lb-container');
 224       containerTopPadding = parseInt($container.css('padding-top'), 10);
 225       containerRightPadding = parseInt($container.css('padding-right'), 10);
 226       containerBottomPadding = parseInt($container.css('padding-bottom'), 10);
 227       containerLeftPadding = parseInt($container.css('padding-left'), 10);
 228       newWidth = imageWidth + containerLeftPadding + containerRightPadding;
 229       newHeight = imageHeight + containerTopPadding + containerBottomPadding;
 230       if (newWidth !== oldWidth && newHeight !== oldHeight) {
 231         $outerContainer.animate({
 232           width: newWidth,
 233           height: newHeight
 234         }, this.options.resizeDuration, 'swing');
 235       } else if (newWidth !== oldWidth) {
 236         $outerContainer.animate({
 237           width: newWidth
 238         }, this.options.resizeDuration, 'swing');
 239       } else if (newHeight !== oldHeight) {
 240         $outerContainer.animate({
 241           height: newHeight
 242         }, this.options.resizeDuration, 'swing');
 243       }
 244       setTimeout(function() {
 245         $lightbox.find('.lb-dataContainer').width(newWidth);
 246         $lightbox.find('.lb-prevLink').height(newHeight);
 247         $lightbox.find('.lb-nextLink').height(newHeight);
 248         _this.showImage();
 249       }, this.options.resizeDuration);
 250     };
 251
 252     Lightbox.prototype.showImage = function() {
 253       var $lightbox;
 254       $lightbox = $('#lightbox');
 255       $lightbox.find('.lb-loader').hide();
 256       $lightbox.find('.lb-image').fadeIn('slow');
 257       this.updateNav();
 258       this.updateDetails();
 259       this.preloadNeighboringImages();
 260       this.enableKeyboardNav();
 261     };
 262
 263     Lightbox.prototype.updateNav = function() {
 264       var $lightbox;
 265       $lightbox = $('#lightbox');
 266       $lightbox.find('.lb-nav').show();
 267       if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
 268       if (this.currentImageIndex < this.album.length - 1) {
 269         $lightbox.find('.lb-next').show();
 270       }
 271     };
 272
 273     Lightbox.prototype.updateDetails = function() {
 274       var $lightbox,
 275         _this = this;
 276       $lightbox = $('#lightbox');
 277       if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
 278         $lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
 279       }
 280       if (this.album.length > 1) {
 281         $lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + '  ' + this.album.length).fadeIn('fast');
 282       } else {
 283         $lightbox.find('.lb-number').hide();
 284       }
 285       $lightbox.find('.lb-outerContainer').removeClass('animating');
 286       $lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
 287         return _this.sizeOverlay();
 288       });
 289     };
 290
 291     Lightbox.prototype.preloadNeighboringImages = function() {
 292       var preloadNext, preloadPrev;
 293       if (this.album.length > this.currentImageIndex + 1) {
 294         preloadNext = new Image;
 295         preloadNext.src = this.album[this.currentImageIndex + 1].link;
 296       }
 297       if (this.currentImageIndex > 0) {
 298         preloadPrev = new Image;
 299         preloadPrev.src = this.album[this.currentImageIndex - 1].link;
 300       }
 301     };
 302
 303     Lightbox.prototype.enableKeyboardNav = function() {
 304       $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
 305     };
 306
 307     Lightbox.prototype.disableKeyboardNav = function() {
 308       $(document).off('.keyboard');
 309     };
 310
 311     Lightbox.prototype.keyboardAction = function(event) {
 312       var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode;
 313       KEYCODE_ESC = 27;
 314       KEYCODE_LEFTARROW = 37;
 315       KEYCODE_RIGHTARROW = 39;
 316       keycode = event.keyCode;
 317       key = String.fromCharCode(keycode).toLowerCase();
 318       if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
 319         this.end();
 320       } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
 321         if (this.currentImageIndex !== 0) {
 322           this.changeImage(this.currentImageIndex - 1);
 323         }
 324       } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
 325         if (this.currentImageIndex !== this.album.length - 1) {
 326           this.changeImage(this.currentImageIndex + 1);
 327         }
 328       }
 329     };
 330
 331     Lightbox.prototype.end = function() {
 332       this.disableKeyboardNav();
 333       $(window).off("resize", this.sizeOverlay);
 334       $('#lightbox').fadeOut(this.options.fadeDuration);
 335       $('#lightboxOverlay').fadeOut(this.options.fadeDuration);
 336       return $('select, object, embed').css({
 337         visibility: "visible"
 338       });
 339     };
 340
 341     return Lightbox;
 342
 343   })();
 344
 345   $(function() {
 346     var lightbox, options;
 347     options = new LightboxOptions;
 348     return lightbox = new Lightbox(options);
 349   });
 350
 351 }).call(this);