JAVASCRIPT   141

lightbox.js

Guest on 19th April 2022 01:17:20 AM

  1.  
  2. /*
  3. Lightbox v2.51
  4. by Lokesh Dhakar
  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);

Raw Paste

Login or Register to edit or fork this paste. It's free.