Team:Cornell/script/lightbox

From 2014.igem.org

(Difference between revisions)
(Created page with "/* Lightbox v2.51 by Lokesh Dhakar - http://www.lokeshdhakar.com For more information, visit: http://lokeshdhakar.com/projects/lightbox2/ Licensed under the Creative Commons At...")
 
(2 intermediate revisions not shown)
Line 1: Line 1:
/*
/*
-
Lightbox v2.51
+
Lightbox for Bootstrap 3 by @ashleydw
-
by Lokesh Dhakar - http://www.lokeshdhakar.com
+
https://github.com/ashleydw/lightbox
-
For more information, visit:
+
License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
-
http://lokeshdhakar.com/projects/lightbox2/
+
*/
-
Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
 
-
- free for use in both personal and commercial projects
 
-
- attribution requires leaving author name, author link, and the license info intact
 
-
 
-
Thanks
 
-
- Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
 
-
- Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.
 
-
 
-
 
-
Table of Contents
 
-
=================
 
-
LightboxOptions
 
-
 
-
Lightbox
 
-
- constructor
 
-
- init
 
-
- enable
 
-
- build
 
-
- start
 
-
- changeImage
 
-
- sizeContainer
 
-
- showImage
 
-
- updateNav
 
-
- updateDetails
 
-
- preloadNeigbhoringImages
 
-
- enableKeyboardNav
 
-
- disableKeyboardNav
 
-
- keyboardAction
 
-
- end
 
-
 
-
options = new LightboxOptions
 
-
lightbox = new Lightbox options
 
-
*/
 
(function() {
(function() {
-
   var $, Lightbox, LightboxOptions;
+
  "use strict";
 +
   var $, EkkoLightbox;
   $ = jQuery;
   $ = jQuery;
-
   LightboxOptions = (function() {
+
   EkkoLightbox = function(element, options) {
-
 
+
    var content, footer, header,
-
     function LightboxOptions() {
+
      _this = this;
-
       this.fileLoadingImage = 'https://static.igem.org/mediawiki/2013/e/e4/Cornell-lightbox-Loading.gif';
+
     this.options = $.extend({
-
      this.fileCloseImage = 'https://static.igem.org/mediawiki/2013/6/67/Cornell-lightbox-close.png';
+
       title: null,
-
      this.resizeDuration = 700;
+
      footer: null,
-
      this.fadeDuration = 500;
+
      remote: null
-
      this.labelImage = "Image";
+
    }, $.fn.ekkoLightbox.defaults, options || {});
-
      this.labelOf = "of";
+
    this.$element = $(element);
-
     }
+
    content = '';
-
 
+
    this.modal_id = this.options.modal_id ? this.options.modal_id : 'ekkoLightbox-' + Math.floor((Math.random() * 1000) + 1);
-
    return LightboxOptions;
+
    header = '<div class="modal-header"' + (this.options.title || this.options.always_show_close ? '' : ' style="display:none"') + '><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button></div>';
-
 
+
    footer = '<div class="modal-footer"' + (this.options.footer ? '' : ' style="display:none"') + '>' + this.options.footer + '</div>';
-
  })();
+
    $(document.body).append('<div id="' + this.modal_id + '" class="ekko-lightbox modal fade" tabindex="-1"><div class="modal-dialog"><div class="modal-content">' + header + '<div class="modal-body"><div class="ekko-lightbox-container"><div></div></div></div>' + footer + '</div></div></div>');
-
 
+
    this.modal = $('#' + this.modal_id);
-
  Lightbox = (function() {
+
    this.modal_dialog = this.modal.find('.modal-dialog').first();
-
 
+
    this.modal_content = this.modal.find('.modal-content').first();
-
     function Lightbox(options) {
+
    this.modal_body = this.modal.find('.modal-body').first();
-
      this.options = options;
+
     this.lightbox_container = this.modal_body.find('.ekko-lightbox-container').first();
-
      this.album = [];
+
    this.lightbox_body = this.lightbox_container.find('> div:first-child').first();
-
       this.currentImageIndex = void 0;
+
     this.showLoading();
-
       this.init();
+
    this.modal_arrows = null;
-
    }
+
    this.border = {
-
 
+
       top: parseFloat(this.modal_dialog.css('border-top-width')) + parseFloat(this.modal_content.css('border-top-width')) + parseFloat(this.modal_body.css('border-top-width')),
-
    Lightbox.prototype.init = function() {
+
       right: parseFloat(this.modal_dialog.css('border-right-width')) + parseFloat(this.modal_content.css('border-right-width')) + parseFloat(this.modal_body.css('border-right-width')),
-
       this.enable();
+
       bottom: parseFloat(this.modal_dialog.css('border-bottom-width')) + parseFloat(this.modal_content.css('border-bottom-width')) + parseFloat(this.modal_body.css('border-bottom-width')),
-
       return this.build();
+
       left: parseFloat(this.modal_dialog.css('border-left-width')) + parseFloat(this.modal_content.css('border-left-width')) + parseFloat(this.modal_body.css('border-left-width'))
     };
     };
-
 
+
     this.padding = {
-
     Lightbox.prototype.enable = function() {
+
       top: parseFloat(this.modal_dialog.css('padding-top')) + parseFloat(this.modal_content.css('padding-top')) + parseFloat(this.modal_body.css('padding-top')),
-
       var _this = this;
+
       right: parseFloat(this.modal_dialog.css('padding-right')) + parseFloat(this.modal_content.css('padding-right')) + parseFloat(this.modal_body.css('padding-right')),
-
       return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {
+
      bottom: parseFloat(this.modal_dialog.css('padding-bottom')) + parseFloat(this.modal_content.css('padding-bottom')) + parseFloat(this.modal_body.css('padding-bottom')),
-
        _this.start($(e.currentTarget));
+
       left: parseFloat(this.modal_dialog.css('padding-left')) + parseFloat(this.modal_content.css('padding-left')) + parseFloat(this.modal_body.css('padding-left'))
-
        return false;
+
-
       });
+
     };
     };
 +
    this.modal.on('show.bs.modal', this.options.onShow.bind(this)).on('shown.bs.modal', function() {
 +
      _this.modal_shown();
 +
      return _this.options.onShown.call(_this);
 +
    }).on('hide.bs.modal', this.options.onHide.bind(this)).on('hidden.bs.modal', function() {
 +
      if (_this.gallery) {
 +
        $(document).off('keydown.ekkoLightbox');
 +
      }
 +
      _this.modal.remove();
 +
      return _this.options.onHidden.call(_this);
 +
    }).modal('show', options);
 +
    return this.modal;
 +
  };
-
    Lightbox.prototype.build = function() {
+
  EkkoLightbox.prototype = {
-
       var $lightbox,
+
    modal_shown: function() {
 +
       var video_id,
         _this = this;
         _this = this;
-
       $("<div>", {
+
       if (!this.options.remote) {
-
         id: 'lightboxOverlay'
+
         return this.error('No remote target given');
-
       }).after($('<div/>', {
+
       } else {
-
         id: 'lightbox'
+
        this.gallery = this.$element.data('gallery');
-
      }).append($('<div/>', {
+
         if (this.gallery) {
-
        "class": 'lb-outerContainer'
+
          if (this.options.gallery_parent_selector === 'document.body' || this.options.gallery_parent_selector === '') {
-
      }).append($('<div/>', {
+
            this.gallery_items = $(document.body).find('*[data-toggle="lightbox"][data-gallery="' + this.gallery + '"]');
-
        "class": 'lb-container'
+
          } else {
-
      }).append($('<img/>', {
+
            this.gallery_items = this.$element.parents(this.options.gallery_parent_selector).first().find('*[data-toggle="lightbox"][data-gallery="' + this.gallery + '"]');
-
        "class": 'lb-image'
+
          }
-
      }), $('<div/>', {
+
          this.gallery_index = this.gallery_items.index(this.$element);
-
        "class": 'lb-nav'
+
          $(document).on('keydown.ekkoLightbox', this.navigate.bind(this));
-
      }).append($('<a/>', {
+
          if (this.options.directional_arrows && this.gallery_items.length > 1) {
-
        "class": 'lb-prev'
+
            this.lightbox_container.prepend('<div class="ekko-lightbox-nav-overlay"><a href="#" class="' + this.strip_stops(this.options.left_arrow_class) + '"></a><a href="#" class="' + this.strip_stops(this.options.right_arrow_class) + '"></a></div>');
-
      }), $('<a/>', {
+
            this.modal_arrows = this.lightbox_container.find('div.ekko-lightbox-nav-overlay').first();
-
        "class": 'lb-next'
+
            this.lightbox_container.find('a' + this.strip_spaces(this.options.left_arrow_class)).on('click', function(event) {
-
      })), $('<div/>', {
+
              event.preventDefault();
-
        "class": 'lb-loader'
+
              return _this.navigate_left();
-
      }).append($('<a/>', {
+
            });
-
        "class": 'lb-cancel'
+
            this.lightbox_container.find('a' + this.strip_spaces(this.options.right_arrow_class)).on('click', function(event) {
-
      }).append($('<img/>', {
+
              event.preventDefault();
-
        src: this.options.fileLoadingImage
+
              return _this.navigate_right();
-
      }))))), $('<div/>', {
+
            });
-
        "class": 'lb-dataContainer'
+
          }
-
      }).append($('<div/>', {
+
        }
-
        "class": 'lb-data'
+
        if (this.options.type) {
-
      }).append($('<div/>', {
+
          if (this.options.type === 'image') {
-
        "class": 'lb-details'
+
            return this.preloadImage(this.options.remote, true);
-
      }).append($('<span/>', {
+
          } else if (this.options.type === 'youtube' && (video_id = this.getYoutubeId(this.options.remote))) {
-
         "class": 'lb-caption'
+
            return this.showYoutubeVideo(video_id);
-
       }), $('<span/>', {
+
          } else if (this.options.type === 'vimeo') {
-
        "class": 'lb-number'
+
            return this.showVimeoVideo(this.options.remote);
-
      })), $('<div/>', {
+
          } else if (this.options.type === 'instagram') {
-
        "class": 'lb-closeContainer'
+
            return this.showInstagramVideo(this.options.remote);
-
       }).append($('<a/>', {
+
          } else {
-
        "class": 'lb-close'
+
            return this.error("Could not detect remote target type. Force the type using data-type=\"image|youtube|vimeo\"");
-
       }).append($('<img/>', {
+
          }
-
        src: this.options.fileCloseImage
+
        } else {
-
      }))))))).appendTo($('body'));
+
          return this.detectRemoteType(this.options.remote);
-
      $('#lightboxOverlay').hide().on('click', function(e) {
+
         }
-
        _this.end();
+
       }
 +
    },
 +
    strip_stops: function(str) {
 +
      return str.replace(/\./g, '');
 +
    },
 +
    strip_spaces: function(str) {
 +
       return str.replace(/\s/g, '');
 +
    },
 +
    isImage: function(str) {
 +
       return str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
 +
    },
 +
    isSwf: function(str) {
 +
      return str.match(/\.(swf)((\?|#).*)?$/i);
 +
    },
 +
    getYoutubeId: function(str) {
 +
      var match;
 +
      match = str.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
 +
      if (match && match[2].length === 11) {
 +
        return match[2];
 +
      } else {
         return false;
         return false;
-
       });
+
       }
-
      $lightbox = $('#lightbox');
+
    },
-
      $lightbox.hide().on('click', function(e) {
+
    getVimeoId: function(str) {
-
        if ($(e.target).attr('id') === 'lightbox') _this.end();
+
      if (str.indexOf('vimeo') > 0) {
 +
        return str;
 +
      } else {
         return false;
         return false;
-
       });
+
       }
-
      $lightbox.find('.lb-outerContainer').on('click', function(e) {
+
    },
-
        if ($(e.target).attr('id') === 'lightbox') _this.end();
+
    getInstagramId: function(str) {
 +
      if (str.indexOf('instagram') > 0) {
 +
        return str;
 +
      } else {
         return false;
         return false;
-
       });
+
       }
-
      $lightbox.find('.lb-prev').on('click', function(e) {
+
    },
-
        _this.changeImage(_this.currentImageIndex - 1);
+
    navigate: function(event) {
-
        return false;
+
       event = event || window.event;
-
      });
+
       if (event.keyCode === 39 || event.keyCode === 37) {
-
      $lightbox.find('.lb-next').on('click', function(e) {
+
         if (event.keyCode === 39) {
-
        _this.changeImage(_this.currentImageIndex + 1);
+
           return this.navigate_right();
-
        return false;
+
         } else if (event.keyCode === 37) {
-
      });
+
           return this.navigate_left();
-
      $lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
+
-
        _this.end();
+
-
        return false;
+
-
       });
+
-
    };
+
-
 
+
-
    Lightbox.prototype.start = function($link) {
+
-
      var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
+
-
      $(window).on("resize", this.sizeOverlay);
+
-
       $('select, object, embed').css({
+
-
        visibility: "hidden"
+
-
      });
+
-
      $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
+
-
      this.album = [];
+
-
      imageNumber = 0;
+
-
      if ($link.attr('rel') === 'lightbox') {
+
-
         this.album.push({
+
-
          link: $link.attr('href'),
+
-
           title: $link.attr('title')
+
-
         });
+
-
      } else {
+
-
        _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
+
-
        for (i = 0, _len = _ref.length; i < _len; i++) {
+
-
           a = _ref[i];
+
-
          this.album.push({
+
-
            link: $(a).attr('href'),
+
-
            title: $(a).attr('title')
+
-
          });
+
-
          if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
+
         }
         }
       }
       }
-
      $window = $(window);
+
     },
-
      top = $window.scrollTop() + $window.height() / 10;
+
     navigate_left: function() {
-
      left = $window.scrollLeft();
+
       var src;
-
      $lightbox = $('#lightbox');
+
       if (this.gallery_items.length === 1) {
-
      $lightbox.css({
+
         return;
-
        top: top + 'px',
+
-
        left: left + 'px'
+
-
      }).fadeIn(this.options.fadeDuration);
+
-
      this.changeImage(imageNumber);
+
-
     };
+
-
 
+
-
     Lightbox.prototype.changeImage = function(imageNumber) {
+
-
       var $image, $lightbox, preloader,
+
-
        _this = this;
+
-
      this.disableKeyboardNav();
+
-
      $lightbox = $('#lightbox');
+
-
      $image = $lightbox.find('.lb-image');
+
-
      this.sizeOverlay();
+
-
      $('#lightboxOverlay').fadeIn(this.options.fadeDuration);
+
-
      $('.loader').fadeIn('slow');
+
-
      $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
+
-
      $lightbox.find('.lb-outerContainer').addClass('animating');
+
-
      preloader = new Image;
+
-
      preloader.onload = function() {
+
-
        $image.attr('src', _this.album[imageNumber].link);
+
-
        $image.width = preloader.width;
+
-
        $image.height = preloader.height;
+
-
        return _this.sizeContainer(preloader.width, preloader.height);
+
-
      };
+
-
      preloader.src = this.album[imageNumber].link;
+
-
      this.currentImageIndex = imageNumber;
+
-
    };
+
-
 
+
-
    Lightbox.prototype.sizeOverlay = function() {
+
-
      return $('#lightboxOverlay').width($(document).width()).height($(document).height());
+
-
    };
+
-
 
+
-
    Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
+
-
      var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth,
+
-
        _this = this;
+
-
      $lightbox = $('#lightbox');
+
-
      $outerContainer = $lightbox.find('.lb-outerContainer');
+
-
      oldWidth = $outerContainer.outerWidth();
+
-
      oldHeight = $outerContainer.outerHeight();
+
-
      $container = $lightbox.find('.lb-container');
+
-
      containerTopPadding = parseInt($container.css('padding-top'), 10);
+
-
      containerRightPadding = parseInt($container.css('padding-right'), 10);
+
-
      containerBottomPadding = parseInt($container.css('padding-bottom'), 10);
+
-
      containerLeftPadding = parseInt($container.css('padding-left'), 10);
+
-
      newWidth = imageWidth + containerLeftPadding + containerRightPadding;
+
-
      newHeight = imageHeight + containerTopPadding + containerBottomPadding;
+
-
       if (newWidth !== oldWidth && newHeight !== oldHeight) {
+
-
        $outerContainer.animate({
+
-
          width: newWidth,
+
-
          height: newHeight
+
-
        }, this.options.resizeDuration, 'swing');
+
-
      } else if (newWidth !== oldWidth) {
+
-
        $outerContainer.animate({
+
-
          width: newWidth
+
-
        }, this.options.resizeDuration, 'swing');
+
-
      } else if (newHeight !== oldHeight) {
+
-
         $outerContainer.animate({
+
-
          height: newHeight
+
-
        }, this.options.resizeDuration, 'swing');
+
       }
       }
-
       setTimeout(function() {
+
       this.showLoading();
-
        $lightbox.find('.lb-dataContainer').width(newWidth);
+
       if (this.gallery_index === 0) {
-
        $lightbox.find('.lb-prevLink').height(newHeight);
+
        this.gallery_index = this.gallery_items.length - 1;
-
        $lightbox.find('.lb-nextLink').height(newHeight);
+
      } else {
-
        _this.showImage();
+
         this.gallery_index--;
-
      }, this.options.resizeDuration);
+
-
    };
+
-
 
+
-
    Lightbox.prototype.showImage = function() {
+
-
      var $lightbox;
+
-
       $lightbox = $('#lightbox');
+
-
      $lightbox.find('.lb-loader').hide();
+
-
      $lightbox.find('.lb-image').fadeIn('slow');
+
-
      this.updateNav();
+
-
      this.updateDetails();
+
-
      this.preloadNeighboringImages();
+
-
      this.enableKeyboardNav();
+
-
    };
+
-
 
+
-
    Lightbox.prototype.updateNav = function() {
+
-
      var $lightbox;
+
-
      $lightbox = $('#lightbox');
+
-
      $lightbox.find('.lb-nav').show();
+
-
      if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
+
-
      if (this.currentImageIndex < this.album.length - 1) {
+
-
         $lightbox.find('.lb-next').show();
+
       }
       }
-
    };
+
      this.options.onNavigate('left', this.gallery_index);
-
 
+
       this.$element = $(this.gallery_items.get(this.gallery_index));
-
    Lightbox.prototype.updateDetails = function() {
+
       this.updateTitleAndFooter();
-
      var $lightbox,
+
      src = this.$element.attr('data-remote') || this.$element.attr('href');
-
        _this = this;
+
      return this.detectRemoteType(src, this.$element.attr('data-type'));
-
       $lightbox = $('#lightbox');
+
    },
-
       if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
+
    navigate_right: function() {
-
        $lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
+
      var next, src;
 +
      if (this.gallery_items.length === 1) {
 +
        return;
       }
       }
-
       if (this.album.length > 1) {
+
      this.showLoading();
-
         $lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + '  ' + this.album.length).fadeIn('fast');
+
       if (this.gallery_index === this.gallery_items.length - 1) {
 +
         this.gallery_index = 0;
       } else {
       } else {
-
         $lightbox.find('.lb-number').hide();
+
         this.gallery_index++;
       }
       }
-
       $lightbox.find('.lb-outerContainer').removeClass('animating');
+
       this.options.onNavigate('right', this.gallery_index);
-
       $lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
+
      this.$element = $(this.gallery_items.get(this.gallery_index));
-
        return _this.sizeOverlay();
+
       src = this.$element.attr('data-remote') || this.$element.attr('href');
-
       });
+
       this.updateTitleAndFooter();
-
    };
+
      this.detectRemoteType(src, this.$element.attr('data-type'));
-
 
+
       if (this.gallery_index + 1 < this.gallery_items.length) {
-
    Lightbox.prototype.preloadNeighboringImages = function() {
+
        next = $(this.gallery_items.get(this.gallery_index + 1), false);
-
      var preloadNext, preloadPrev;
+
         src = next.attr('data-remote') || next.attr('href');
-
       if (this.album.length > this.currentImageIndex + 1) {
+
         if (next.attr('data-type') === 'image' || this.isImage(src)) {
-
         preloadNext = new Image;
+
          return this.preloadImage(src, false);
-
         preloadNext.src = this.album[this.currentImageIndex + 1].link;
+
        }
       }
       }
-
       if (this.currentImageIndex > 0) {
+
    },
-
         preloadPrev = new Image;
+
    detectRemoteType: function(src, type) {
-
         preloadPrev.src = this.album[this.currentImageIndex - 1].link;
+
      var video_id;
 +
       if (type === 'image' || this.isImage(src)) {
 +
         this.options.type = 'image';
 +
         return this.preloadImage(src, true);
 +
      } else if (type === 'youtube' || (video_id = this.getYoutubeId(src))) {
 +
        this.options.type = 'youtube';
 +
        return this.showYoutubeVideo(video_id);
 +
      } else if (type === 'vimeo' || (video_id = this.getVimeoId(src))) {
 +
        this.options.type = 'vimeo';
 +
        return this.showVimeoVideo(video_id);
 +
      } else if (type === 'instagram' || (video_id = this.getInstagramId(src))) {
 +
        this.options.type = 'instagram';
 +
        return this.showInstagramVideo(video_id);
 +
      } else {
 +
        return this.error("Could not detect remote target type. Force the type using data-type=\"image|youtube|vimeo\"");
       }
       }
-
     };
+
     },
-
 
+
     updateTitleAndFooter: function() {
-
     Lightbox.prototype.enableKeyboardNav = function() {
+
       var caption, footer, header, title;
-
       $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
+
      header = this.modal_content.find('.modal-header');
-
    };
+
      footer = this.modal_content.find('.modal-footer');
-
 
+
      title = this.$element.data('title') || "";
-
    Lightbox.prototype.disableKeyboardNav = function() {
+
      caption = this.$element.data('footer') || "";
-
       $(document).off('.keyboard');
+
      if (title || this.options.always_show_close) {
-
    };
+
        header.css('display', '').find('.modal-title').html(title || "&nbsp;");
-
 
+
      } else {
-
     Lightbox.prototype.keyboardAction = function(event) {
+
        header.css('display', 'none');
-
       var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode;
+
       }
-
       KEYCODE_ESC = 27;
+
      if (caption) {
-
       KEYCODE_LEFTARROW = 37;
+
        footer.css('display', '').html(caption);
-
       KEYCODE_RIGHTARROW = 39;
+
      } else {
-
       keycode = event.keyCode;
+
        footer.css('display', 'none');
-
       key = String.fromCharCode(keycode).toLowerCase();
+
      }
-
       if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
+
      return this;
-
         this.end();
+
    },
-
       } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
+
     showLoading: function() {
-
        if (this.currentImageIndex !== 0) {
+
      this.lightbox_body.html('<div class="modal-loading">Loading..</div>');
-
          this.changeImage(this.currentImageIndex - 1);
+
      return this;
-
        }
+
    },
-
      } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
+
    showYoutubeVideo: function(id) {
-
        if (this.currentImageIndex !== this.album.length - 1) {
+
       var aspectRatio, height, width;
-
          this.changeImage(this.currentImageIndex + 1);
+
       aspectRatio = 560 / 315;
-
        }
+
       width = this.$element.data('width') || 560;
 +
       width = this.checkDimensions(width);
 +
       height = width / aspectRatio;
 +
       this.resize(width);
 +
       this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1" frameborder="0" allowfullscreen></iframe>');
 +
      if (this.modal_arrows) {
 +
         return this.modal_arrows.css('display', 'none');
 +
       }
 +
    },
 +
    showVimeoVideo: function(id) {
 +
      var aspectRatio, height, width;
 +
      aspectRatio = 500 / 281;
 +
      width = this.$element.data('width') || 560;
 +
      width = this.checkDimensions(width);
 +
      height = width / aspectRatio;
 +
      this.resize(width);
 +
      this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>');
 +
      if (this.modal_arrows) {
 +
        return this.modal_arrows.css('display', 'none');
 +
      }
 +
    },
 +
    showInstagramVideo: function(id) {
 +
      var height, width;
 +
      width = this.$element.data('width') || 612;
 +
      width = this.checkDimensions(width);
 +
      height = width;
 +
      this.resize(width);
 +
      this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="' + this.addTrailingSlash(id) + 'embed/" frameborder="0" allowfullscreen></iframe>');
 +
      if (this.modal_arrows) {
 +
        return this.modal_arrows.css('display', 'none');
       }
       }
-
     };
+
     },
-
 
+
     error: function(message) {
-
     Lightbox.prototype.end = function() {
+
      this.lightbox_body.html(message);
-
       this.disableKeyboardNav();
+
      return this;
-
       $(window).off("resize", this.sizeOverlay);
+
    },
-
      $('#lightbox').fadeOut(this.options.fadeDuration);
+
    preloadImage: function(src, onLoadShowImage) {
-
      $('#lightboxOverlay').fadeOut(this.options.fadeDuration);
+
       var img,
-
       return $('select, object, embed').css({
+
        _this = this;
-
         visibility: "visible"
+
      img = new Image();
 +
       if ((onLoadShowImage == null) || onLoadShowImage === true) {
 +
        img.onload = function() {
 +
          var image;
 +
          image = $('<img />');
 +
          image.attr('src', img.src);
 +
          image.addClass('img-responsive');
 +
          _this.lightbox_body.html(image);
 +
          if (_this.modal_arrows) {
 +
            _this.modal_arrows.css('display', 'block');
 +
          }
 +
          return _this.resize(img.width);
 +
        };
 +
        img.onerror = function() {
 +
          return _this.error('Failed to load image: ' + src);
 +
        };
 +
      }
 +
      img.src = src;
 +
      return img;
 +
    },
 +
    resize: function(width) {
 +
      var width_total;
 +
      width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
 +
       this.modal_dialog.css('width', 'auto').css('max-width', width_total);
 +
      this.lightbox_container.find('a').css('padding-top', function() {
 +
         return $(this).parent().height() / 2;
       });
       });
-
     };
+
      return this;
-
 
+
     },
-
     return Lightbox;
+
    checkDimensions: function(width) {
 +
      var body_width, width_total;
 +
      width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
 +
      body_width = document.body.clientWidth;
 +
      if (width_total > body_width) {
 +
        width = this.modal_body.width();
 +
      }
 +
      return width;
 +
     },
 +
    close: function() {
 +
      return this.modal.modal('hide');
 +
    },
 +
    addTrailingSlash: function(url) {
 +
      if (url.substr(-1) !== '/') {
 +
        url += '/';
 +
      }
 +
      return url;
 +
    }
 +
  };
-
   })();
+
   $.fn.ekkoLightbox = function(options) {
 +
    return this.each(function() {
 +
      var $this;
 +
      $this = $(this);
 +
      options = $.extend({
 +
        remote: $this.attr('data-remote') || $this.attr('href'),
 +
        gallery_parent_selector: $this.attr('data-parent'),
 +
        type: $this.attr('data-type')
 +
      }, options, $this.data());
 +
      new EkkoLightbox(this, options);
 +
      return this;
 +
    });
 +
  };
-
   $(function() {
+
   $.fn.ekkoLightbox.defaults = {
-
     var lightbox, options;
+
    gallery_parent_selector: '*:not(.row)',
-
     options = new LightboxOptions;
+
    left_arrow_class: '.glyphicon .glyphicon-chevron-left',
-
     return lightbox = new Lightbox(options);
+
    right_arrow_class: '.glyphicon .glyphicon-chevron-right',
-
   });
+
    directional_arrows: true,
 +
    type: null,
 +
    always_show_close: true,
 +
    onShow: function() {},
 +
     onShown: function() {},
 +
     onHide: function() {},
 +
     onHidden: function() {},
 +
    onNavigate: function() {}
 +
   };
}).call(this);
}).call(this);

Latest revision as of 22:09, 10 October 2014

/* Lightbox for Bootstrap 3 by @ashleydw https://github.com/ashleydw/lightbox

License: https://github.com/ashleydw/lightbox/blob/master/LICENSE

  • /


(function() { 

 "use strict";
 var $, EkkoLightbox;

 $ = jQuery;

 EkkoLightbox = function(element, options) {
   var content, footer, header,
     _this = this;
   this.options = $.extend({
     title: null,
     footer: null,
     remote: null
   }, $.fn.ekkoLightbox.defaults, options || {});
   this.$element = $(element);
   content = ;
   this.modal_id = this.options.modal_id ? this.options.modal_id : 'ekkoLightbox-' + Math.floor((Math.random() * 1000) + 1);
header = '
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
'; footer = '
' + this.options.footer + '
'; $(document.body).append(''); 
   this.modal = $('#' + this.modal_id);
   this.modal_dialog = this.modal.find('.modal-dialog').first();
   this.modal_content = this.modal.find('.modal-content').first();
   this.modal_body = this.modal.find('.modal-body').first();
   this.lightbox_container = this.modal_body.find('.ekko-lightbox-container').first();
   this.lightbox_body = this.lightbox_container.find('> div:first-child').first();
   this.showLoading();
   this.modal_arrows = null;
   this.border = {
     top: parseFloat(this.modal_dialog.css('border-top-width')) + parseFloat(this.modal_content.css('border-top-width')) + parseFloat(this.modal_body.css('border-top-width')),
     right: parseFloat(this.modal_dialog.css('border-right-width')) + parseFloat(this.modal_content.css('border-right-width')) + parseFloat(this.modal_body.css('border-right-width')),
     bottom: parseFloat(this.modal_dialog.css('border-bottom-width')) + parseFloat(this.modal_content.css('border-bottom-width')) + parseFloat(this.modal_body.css('border-bottom-width')),
     left: parseFloat(this.modal_dialog.css('border-left-width')) + parseFloat(this.modal_content.css('border-left-width')) + parseFloat(this.modal_body.css('border-left-width'))
   };
   this.padding = {
     top: parseFloat(this.modal_dialog.css('padding-top')) + parseFloat(this.modal_content.css('padding-top')) + parseFloat(this.modal_body.css('padding-top')),
     right: parseFloat(this.modal_dialog.css('padding-right')) + parseFloat(this.modal_content.css('padding-right')) + parseFloat(this.modal_body.css('padding-right')),
     bottom: parseFloat(this.modal_dialog.css('padding-bottom')) + parseFloat(this.modal_content.css('padding-bottom')) + parseFloat(this.modal_body.css('padding-bottom')),
     left: parseFloat(this.modal_dialog.css('padding-left')) + parseFloat(this.modal_content.css('padding-left')) + parseFloat(this.modal_body.css('padding-left'))
   };
   this.modal.on('show.bs.modal', this.options.onShow.bind(this)).on('shown.bs.modal', function() {
     _this.modal_shown();
     return _this.options.onShown.call(_this);
   }).on('hide.bs.modal', this.options.onHide.bind(this)).on('hidden.bs.modal', function() {
     if (_this.gallery) {
       $(document).off('keydown.ekkoLightbox');
     }
     _this.modal.remove();
     return _this.options.onHidden.call(_this);
   }).modal('show', options);
   return this.modal;
 };

 EkkoLightbox.prototype = {
   modal_shown: function() {
     var video_id,
       _this = this;
     if (!this.options.remote) {
       return this.error('No remote target given');
     } else {
       this.gallery = this.$element.data('gallery');
       if (this.gallery) {
         if (this.options.gallery_parent_selector === 'document.body' || this.options.gallery_parent_selector === ) {
           this.gallery_items = $(document.body).find('*[data-toggle="lightbox"][data-gallery="' + this.gallery + '"]');
         } else {
           this.gallery_items = this.$element.parents(this.options.gallery_parent_selector).first().find('*[data-toggle="lightbox"][data-gallery="' + this.gallery + '"]');
         }
         this.gallery_index = this.gallery_items.index(this.$element);
         $(document).on('keydown.ekkoLightbox', this.navigate.bind(this));
         if (this.options.directional_arrows && this.gallery_items.length > 1) {
this.lightbox_container.prepend('
<a href="#" class="' + this.strip_stops(this.options.left_arrow_class) + '"></a><a href="#" class="' + this.strip_stops(this.options.right_arrow_class) + '"></a>
'); 
           this.modal_arrows = this.lightbox_container.find('div.ekko-lightbox-nav-overlay').first();
           this.lightbox_container.find('a' + this.strip_spaces(this.options.left_arrow_class)).on('click', function(event) {
             event.preventDefault();
             return _this.navigate_left();
           });
           this.lightbox_container.find('a' + this.strip_spaces(this.options.right_arrow_class)).on('click', function(event) {
             event.preventDefault();
             return _this.navigate_right();
           });
         }
       }
       if (this.options.type) {
         if (this.options.type === 'image') {
           return this.preloadImage(this.options.remote, true);
         } else if (this.options.type === 'youtube' && (video_id = this.getYoutubeId(this.options.remote))) {
           return this.showYoutubeVideo(video_id);
         } else if (this.options.type === 'vimeo') {
           return this.showVimeoVideo(this.options.remote);
         } else if (this.options.type === 'instagram') {
           return this.showInstagramVideo(this.options.remote);
         } else {
           return this.error("Could not detect remote target type. Force the type using data-type=\"image|youtube|vimeo\"");
         }
       } else {
         return this.detectRemoteType(this.options.remote);
       }
     }
   },
   strip_stops: function(str) {
     return str.replace(/\./g, );
   },
   strip_spaces: function(str) {
     return str.replace(/\s/g, );
   },
   isImage: function(str) {
     return str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
   },
   isSwf: function(str) {
     return str.match(/\.(swf)((\?|#).*)?$/i);
   },
   getYoutubeId: function(str) {
     var match;
     match = str.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
     if (match && match[2].length === 11) {
       return match[2];
     } else {
       return false;
     }
   },
   getVimeoId: function(str) {
     if (str.indexOf('vimeo') > 0) {
       return str;
     } else {
       return false;
     }
   },
   getInstagramId: function(str) {
     if (str.indexOf('instagram') > 0) {
       return str;
     } else {
       return false;
     }
   },
   navigate: function(event) {
     event = event || window.event;
     if (event.keyCode === 39 || event.keyCode === 37) {
       if (event.keyCode === 39) {
         return this.navigate_right();
       } else if (event.keyCode === 37) {
         return this.navigate_left();
       }
     }
   },
   navigate_left: function() {
     var src;
     if (this.gallery_items.length === 1) {
       return;
     }
     this.showLoading();
     if (this.gallery_index === 0) {
       this.gallery_index = this.gallery_items.length - 1;
     } else {
       this.gallery_index--;
     }
     this.options.onNavigate('left', this.gallery_index);
     this.$element = $(this.gallery_items.get(this.gallery_index));
     this.updateTitleAndFooter();
     src = this.$element.attr('data-remote') || this.$element.attr('href');
     return this.detectRemoteType(src, this.$element.attr('data-type'));
   },
   navigate_right: function() {
     var next, src;
     if (this.gallery_items.length === 1) {
       return;
     }
     this.showLoading();
     if (this.gallery_index === this.gallery_items.length - 1) {
       this.gallery_index = 0;
     } else {
       this.gallery_index++;
     }
     this.options.onNavigate('right', this.gallery_index);
     this.$element = $(this.gallery_items.get(this.gallery_index));
     src = this.$element.attr('data-remote') || this.$element.attr('href');
     this.updateTitleAndFooter();
     this.detectRemoteType(src, this.$element.attr('data-type'));
     if (this.gallery_index + 1 < this.gallery_items.length) {
       next = $(this.gallery_items.get(this.gallery_index + 1), false);
       src = next.attr('data-remote') || next.attr('href');
       if (next.attr('data-type') === 'image' || this.isImage(src)) {
         return this.preloadImage(src, false);
       }
     }
   },
   detectRemoteType: function(src, type) {
     var video_id;
     if (type === 'image' || this.isImage(src)) {
       this.options.type = 'image';
       return this.preloadImage(src, true);
     } else if (type === 'youtube' || (video_id = this.getYoutubeId(src))) {
       this.options.type = 'youtube';
       return this.showYoutubeVideo(video_id);
     } else if (type === 'vimeo' || (video_id = this.getVimeoId(src))) {
       this.options.type = 'vimeo';
       return this.showVimeoVideo(video_id);
     } else if (type === 'instagram' || (video_id = this.getInstagramId(src))) {
       this.options.type = 'instagram';
       return this.showInstagramVideo(video_id);
     } else {
       return this.error("Could not detect remote target type. Force the type using data-type=\"image|youtube|vimeo\"");
     }
   },
   updateTitleAndFooter: function() {
     var caption, footer, header, title;
     header = this.modal_content.find('.modal-header');
     footer = this.modal_content.find('.modal-footer');
     title = this.$element.data('title') || "";
     caption = this.$element.data('footer') || "";
     if (title || this.options.always_show_close) {
       header.css('display', ).find('.modal-title').html(title || " ");
     } else {
       header.css('display', 'none');
     }
     if (caption) {
       footer.css('display', ).html(caption);
     } else {
       footer.css('display', 'none');
     }
     return this;
   },
   showLoading: function() {
this.lightbox_body.html('
Loading..
'); 
     return this;
   },
   showYoutubeVideo: function(id) {
     var aspectRatio, height, width;
     aspectRatio = 560 / 315;
     width = this.$element.data('width') || 560;
     width = this.checkDimensions(width);
     height = width / aspectRatio;
     this.resize(width);
     this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1" frameborder="0" allowfullscreen></iframe>');
     if (this.modal_arrows) {
       return this.modal_arrows.css('display', 'none');
     }
   },
   showVimeoVideo: function(id) {
     var aspectRatio, height, width;
     aspectRatio = 500 / 281;
     width = this.$element.data('width') || 560;
     width = this.checkDimensions(width);
     height = width / aspectRatio;
     this.resize(width);
     this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>');
     if (this.modal_arrows) {
       return this.modal_arrows.css('display', 'none');
     }
   },
   showInstagramVideo: function(id) {
     var height, width;
     width = this.$element.data('width') || 612;
     width = this.checkDimensions(width);
     height = width;
     this.resize(width);
     this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="' + this.addTrailingSlash(id) + 'embed/" frameborder="0" allowfullscreen></iframe>');
     if (this.modal_arrows) {
       return this.modal_arrows.css('display', 'none');
     }
   },
   error: function(message) {
     this.lightbox_body.html(message);
     return this;
   },
   preloadImage: function(src, onLoadShowImage) {
     var img,
       _this = this;
     img = new Image();
     if ((onLoadShowImage == null) || onLoadShowImage === true) {
       img.onload = function() {
         var image;
         image = $('<img />');
         image.attr('src', img.src);
         image.addClass('img-responsive');
         _this.lightbox_body.html(image);
         if (_this.modal_arrows) {
           _this.modal_arrows.css('display', 'block');
         }
         return _this.resize(img.width);
       };
       img.onerror = function() {
         return _this.error('Failed to load image: ' + src);
       };
     }
     img.src = src;
     return img;
   },
   resize: function(width) {
     var width_total;
     width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
     this.modal_dialog.css('width', 'auto').css('max-width', width_total);
     this.lightbox_container.find('a').css('padding-top', function() {
       return $(this).parent().height() / 2;
     });
     return this;
   },
   checkDimensions: function(width) {
     var body_width, width_total;
     width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
     body_width = document.body.clientWidth;
     if (width_total > body_width) {
       width = this.modal_body.width();
     }
     return width;
   },
   close: function() {
     return this.modal.modal('hide');
   },
   addTrailingSlash: function(url) {
     if (url.substr(-1) !== '/') {
       url += '/';
     }
     return url;
   }
 };

 $.fn.ekkoLightbox = function(options) {
   return this.each(function() {
     var $this;
     $this = $(this);
     options = $.extend({
       remote: $this.attr('data-remote') || $this.attr('href'),
       gallery_parent_selector: $this.attr('data-parent'),
       type: $this.attr('data-type')
     }, options, $this.data());
     new EkkoLightbox(this, options);
     return this;
   });
 };

 $.fn.ekkoLightbox.defaults = {
   gallery_parent_selector: '*:not(.row)',
   left_arrow_class: '.glyphicon .glyphicon-chevron-left',
   right_arrow_class: '.glyphicon .glyphicon-chevron-right',
   directional_arrows: true,
   type: null,
   always_show_close: true,
   onShow: function() {},
   onShown: function() {},
   onHide: function() {},
   onHidden: function() {},
   onNavigate: function() {}
 };

}).call(this);

Retrieved from "http://2014.igem.org/Team:Cornell/script/lightbox"