Thumbnail support for image gallery

dist/ekko-lightbox.css

@@ -59,4 +59,47 @@
 
 .ekko-lightbox .modal-footer {
   text-align: left;
+}
+
+.ekko-lightbox .preview-items {
+  height: 130px;
+  padding-right: 0;
+  margin-left: -15px;
+  overflow: hidden;
+  overflow-x: auto;
+}
+
+.ekko-lightbox .preview-item {
+  padding-right: 0;
+  margin-top: 15px;
+  cursor: pointer;
+  opacity: 0.4;
+}
+
+.ekko-lightbox .preview-item.active {
+  opacity: 1;
+}
+
+.ekko-lightbox .preview-item {
+  text-align: center;
+}
+
+.ekko-lightbox .preview-item .glyphicon {
+  position: relative;
+  width: 100%;
+  padding-top: 28px;
+  padding-bottom: 30px;
+  font-size: 30px;
+  color: #828282;
+}
+
+.ekko-lightbox .preview-item .glyphicon .title {
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  width: 100%;
+  font-family: sans-serif;
+  font-size: 10px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
 }

dist/ekko-lightbox.js

@@ -61,21 +61,64 @@ License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
 
   EkkoLightbox.prototype = {
     modal_shown: function() {
-      var video_id,
+      var $list, 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 + '"]');
+            this.gallery_items = $(document.body).find('*[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_items = this.$element.parents(this.options.gallery_parent_selector).first().find('*[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) {
+            if (this.options.preview) {
+              $list = $('<div class="preview-items" />');
+              $.each(this.gallery_items, function(i, item) {
+                var $col, $icon, $title, image;
+                _this.detectRemoteType($(item).attr('href'));
+                $col = $('<div class="preview-item col-xs-2" />');
+                if ($(item).attr('href') === _this.$element.attr('href')) {
+                  $col.addClass('active');
+                }
+                $col.on('click', function(evt) {
+                  evt.preventDefault();
+                  _this.gallery_index = i;
+                  return _this.navigateTo(_this.gallery_index);
+                });
+                switch (_this.options.type) {
+                  case "image":
+                    image = new Image;
+                    image.src = $(item).attr('href');
+                    $(image).attr('width', '100%');
+                    $col.append(image);
+                    break;
+                  case "youtube":
+                  case "vimeo":
+                  case "video":
+                    $icon = $('<span class="glyphicon glyphicon-facetime-video"></span>');
+                    $title = $('<span class="title" />').html(_this.options.type);
+                    $icon.append($title);
+                    $col.append($icon);
+                    break;
+                  default:
+                    $icon = $('<span class="glyphicon glyphicon-picture"></span>');
+                    $title = $('<span class="title" />').html(_this.options.type);
+                    $icon.append($title);
+                    $col.append($icon);
+                }
+                return $list.append($col);
+              });
+              if ($('preview-items').length) {
+                $('preview-items').html($list);
+              } else {
+                this.modal_body.append($list);
+              }
+            }
             this.lightbox_container.append('<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>');
             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) {
@@ -159,6 +202,10 @@ License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
       if (index < 0 || index > this.gallery_items.length - 1) {
         return this;
       }
+      if (this.options.preview) {
+        $('.preview-item').removeClass('active');
+        $('.preview-item:nth-child(' + (index + 1) + ')').addClass('active');
+      }
       this.showLoading();
       this.gallery_index = index;
       this.$element = $(this.gallery_items.get(this.gallery_index));
@@ -243,10 +290,15 @@ License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
       return this;
     },
     showYoutubeVideo: function(id) {
-      var height, width;
+      var height, rel, width;
+      if ((this.$element.attr('data-norelated') != null) || this.options.no_related) {
+        rel = "&rel=0";
+      } else {
+        rel = "";
+      }
       width = this.checkDimensions(this.$element.data('width') || 560);
       height = width / (560 / 315);
-      return this.showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1', width, height);
+      return this.showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + rel, width, height);
     },
     showVimeoVideo: function(id) {
       var height, width;
@@ -374,7 +426,9 @@ License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
       options = $.extend({
         remote: $this.attr('data-remote') || $this.attr('href'),
         gallery_parent_selector: $this.attr('data-parent'),
-        type: $this.attr('data-type')
+        type: $this.attr('data-type'),
+        preview: $this.attr('data-preview'),
+        no_related: $this.attr('data-norelated') ? false : void 0
       }, options, $this.data());
       new EkkoLightbox(this, options);
       return this;
@@ -388,6 +442,7 @@ License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
     directional_arrows: true,
     type: null,
     always_show_close: true,
+    no_related: false,
     loadingMessage: 'Loading...',
     onShow: function() {},
     onShown: function() {},