Lightbox preview

ashleydw · Nov 23, 2015 · 3db1cad · 3db1cad
1 parent a2f158f
commit 3db1cad
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 19 deletions.
diff --git a/dist/ekko-lightbox.css b/dist/ekko-lightbox.css
@@ -62,6 +62,7 @@
 }
 
 .ekko-lightbox .preview-items {
+  height: 130px;
   padding-right: 0;
   margin-left: -15px;
   overflow: hidden;
@@ -85,11 +86,11 @@
 
 .ekko-lightbox .preview-item .glyphicon {
   position: relative;
-  padding: 30px;
+  width: 100%;
+  padding-top: 28px;
+  padding-bottom: 30px;
   font-size: 30px;
   color: #828282;
-  border: 1px solid #B5B5B5;
-  border-radius: 100%;
 }
 
 .ekko-lightbox .preview-item .glyphicon .title {

diff --git a/dist/ekko-lightbox.js b/dist/ekko-lightbox.js
@@ -290,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;
@@ -436,6 +441,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() {},

diff --git a/dist/ekko-lightbox.min.css b/dist/ekko-lightbox.min.css
diff --git a/dist/ekko-lightbox.min.js b/dist/ekko-lightbox.min.js
diff --git a/ekko-lightbox.less b/ekko-lightbox.less
@@ -67,6 +67,7 @@
     margin-left: -15px;
     overflow: hidden;
     overflow-x: auto;
+    height: 130px;
   }
 
   .preview-item {
@@ -85,9 +86,9 @@
     .glyphicon {
       position: relative;
       font-size: 30px;
-      border: 1px solid #B5B5B5;
-      border-radius: 100%;
-      padding: 30px;
+      width: 100%;
+      padding-top: 28px;
+      padding-bottom: 30px;
       color: #828282;
 
       .title {

diff --git a/examples/index.html b/examples/index.html
@@ -525,15 +525,19 @@ <h3 class="page-header" id="lightbox-preview">Example #18: Gallery of Images wit
                                 </a>
                             </div>
                             <div class="row">
-                                <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="withpreview" data-preview="true" data-footer="Big ass waterfall- using footer instead of title" class="col-sm-4">
-                                    <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
-                                </a>
-                                <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="withpreview" data-preview="true" data-title="Cool bottle" data-footer="Now fill it with whiskey" class="col-sm-4">
-                                    <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
-                                </a>
-                                <a href="http://36.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-toggle="lightbox" data-gallery="withpreview" data-preview="true" class="col-sm-4">
-                                    <img src="//36.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" class="img-responsive">
-                                </a>
+                                <div class="col-md-offset-1 col-md-10">
+                                    <div class="row">
+                                        <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="withpreview" data-preview="true"  class="col-sm-4">
+                                            <img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
+                                        </a>
+                                        <a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="withpreview" data-preview="true" class="col-sm-4">
+                                            <img src="//i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-responsive">
+                                        </a>
+                                        <a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="withpreview" data-preview="true" class="col-sm-4">
+                                            <img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive">
+                                        </a>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>