diff --git a/dist/ekko-lightbox.css b/dist/ekko-lightbox.css index ec3432f..1366131 100644 --- a/dist/ekko-lightbox.css +++ b/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; } \ No newline at end of file diff --git a/dist/ekko-lightbox.js b/dist/ekko-lightbox.js index 96e55f9..664ba03 100644 --- a/dist/ekko-lightbox.js +++ b/dist/ekko-lightbox.js @@ -61,7 +61,7 @@ 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'); @@ -69,13 +69,56 @@ License: https://github.com/ashleydw/lightbox/blob/master/LICENSE 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 = $('
'); + $.each(this.gallery_items, function(i, item) { + var $col, $icon, $title, image; + _this.detectRemoteType($(item).attr('href')); + $col = $('
'); + 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 = $(''); + $title = $('').html(_this.options.type); + $icon.append($title); + $col.append($icon); + break; + default: + $icon = $(''); + $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('
'); 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() {}, diff --git a/dist/ekko-lightbox.min.css b/dist/ekko-lightbox.min.css index c81b9cc..3478b98 100644 --- a/dist/ekko-lightbox.min.css +++ b/dist/ekko-lightbox.min.css @@ -3,4 +3,4 @@ * https://github.com/ashleydw/lightbox * * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE - */.ekko-lightbox-container{position:relative}.ekko-lightbox-nav-overlay{position:absolute;top:0;left:0;z-index:100;width:100%;height:100%}.ekko-lightbox-nav-overlay a{z-index:100;display:block;width:49%;height:100%;font-size:30px;color:#fff;text-shadow:2px 2px 4px #000;opacity:0;filter:dropshadow(color=#000000,offx=2,offy=2);-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-o-transition:opacity .5s;transition:opacity .5s}.ekko-lightbox-nav-overlay a:empty{width:49%}.ekko-lightbox a:hover{text-decoration:none;opacity:1}.ekko-lightbox .glyphicon-chevron-left{left:0;float:left;padding-left:15px;text-align:left}.ekko-lightbox .glyphicon-chevron-right{right:0;float:right;padding-right:15px;text-align:right}.ekko-lightbox .modal-footer{text-align:left} \ No newline at end of file + */.ekko-lightbox-container{position:relative}.ekko-lightbox-nav-overlay{position:absolute;top:0;left:0;z-index:100;width:100%;height:100%}.ekko-lightbox-nav-overlay a{z-index:100;display:block;width:49%;height:100%;font-size:30px;color:#fff;text-shadow:2px 2px 4px #000;opacity:0;filter:dropshadow(color=#000000,offx=2,offy=2);-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-o-transition:opacity .5s;transition:opacity .5s}.ekko-lightbox-nav-overlay a:empty{width:49%}.ekko-lightbox a:hover{text-decoration:none;opacity:1}.ekko-lightbox .glyphicon-chevron-left{left:0;float:left;padding-left:15px;text-align:left}.ekko-lightbox .glyphicon-chevron-right{right:0;float:right;padding-right:15px;text-align:right}.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:.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} \ No newline at end of file diff --git a/dist/ekko-lightbox.min.js b/dist/ekko-lightbox.min.js index e929e69..cb59ae1 100644 --- a/dist/ekko-lightbox.min.js +++ b/dist/ekko-lightbox.min.js @@ -4,4 +4,4 @@ * * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE */ -(function(){"use strict";var a,b;a=jQuery,b=function(b,c){var d,e,f,g=this;return this.options=a.extend({title:null,footer:null,remote:null},a.fn.ekkoLightbox.defaults,c||{}),this.$element=a(b),d="",this.modal_id=this.options.modal_id?this.options.modal_id:"ekkoLightbox-"+Math.floor(1e3*Math.random()+1),f='",e='",a(document.body).append('"),this.modal=a("#"+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(){return g.modal_shown(),g.options.onShown.call(g)}).on("hide.bs.modal",this.options.onHide.bind(this)).on("hidden.bs.modal",function(){return g.gallery&&a(document).off("keydown.ekkoLightbox"),g.modal.remove(),g.options.onHidden.call(g)}).modal("show",c),this.modal},b.prototype={modal_shown:function(){var b,c=this;return this.options.remote?(this.gallery=this.$element.data("gallery"),this.gallery&&("document.body"===this.options.gallery_parent_selector||""===this.options.gallery_parent_selector?this.gallery_items=a(document.body).find('*[data-toggle="lightbox"][data-gallery="'+this.gallery+'"]'):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),a(document).on("keydown.ekkoLightbox",this.navigate.bind(this)),this.options.directional_arrows&&this.gallery_items.length>1&&(this.lightbox_container.append('
'),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(a){return a.preventDefault(),c.navigate_left()}),this.lightbox_container.find("a"+this.strip_spaces(this.options.right_arrow_class)).on("click",function(a){return a.preventDefault(),c.navigate_right()}))),this.options.type?"image"===this.options.type?this.preloadImage(this.options.remote,!0):"youtube"===this.options.type&&(b=this.getYoutubeId(this.options.remote))?this.showYoutubeVideo(b):"vimeo"===this.options.type?this.showVimeoVideo(this.options.remote):"instagram"===this.options.type?this.showInstagramVideo(this.options.remote):"url"===this.options.type?this.loadRemoteContent(this.options.remote):"video"===this.options.type?this.showVideoIframe(this.options.remote):this.error('Could not detect remote target type. Force the type using data-type="image|youtube|vimeo|instagram|url|video"'):this.detectRemoteType(this.options.remote)):this.error("No remote target given")},strip_stops:function(a){return a.replace(/\./g,"")},strip_spaces:function(a){return a.replace(/\s/g,"")},isImage:function(a){return a.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)},isSwf:function(a){return a.match(/\.(swf)((\?|#).*)?$/i)},getYoutubeId:function(a){var b;return b=a.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/),b&&11===b[2].length?b[2]:!1},getVimeoId:function(a){return a.indexOf("vimeo")>0?a:!1},getInstagramId:function(a){return a.indexOf("instagram")>0?a:!1},navigate:function(a){if(a=a||window.event,39===a.keyCode||37===a.keyCode){if(39===a.keyCode)return this.navigate_right();if(37===a.keyCode)return this.navigate_left()}},navigateTo:function(b){var c,d;return 0>b||b>this.gallery_items.length-1?this:(this.showLoading(),this.gallery_index=b,this.$element=a(this.gallery_items.get(this.gallery_index)),this.updateTitleAndFooter(),d=this.$element.attr("data-remote")||this.$element.attr("href"),this.detectRemoteType(d,this.$element.attr("data-type")||!1),this.gallery_index+1'+this.options.loadingMessage+"
"),this},showYoutubeVideo:function(a){var b,c;return c=this.checkDimensions(this.$element.data("width")||560),b=c/(560/315),this.showVideoIframe("//www.youtube.com/embed/"+a+"?badge=0&autoplay=1&html5=1",c,b)},showVimeoVideo:function(a){var b,c;return c=this.checkDimensions(this.$element.data("width")||560),b=c/(500/281),this.showVideoIframe(a+"?autoplay=1",c,b)},showInstagramVideo:function(a){var b,c;return c=this.checkDimensions(this.$element.data("width")||612),this.resize(c),b=c+80,this.lightbox_body.html(''),this.options.onContentLoaded.call(this),this.modal_arrows?this.modal_arrows.css("display","none"):void 0},showVideoIframe:function(a,b,c){return c=c||b,this.resize(b),this.lightbox_body.html('
'),this.options.onContentLoaded.call(this),this.modal_arrows&&this.modal_arrows.css("display","none"),this},loadRemoteContent:function(b){var c,d,e=this;return d=this.$element.data("width")||560,this.resize(d),c=this.$element.data("disableExternalCheck")||!1,c||this.isExternal(b)?(this.lightbox_body.html(''),this.options.onContentLoaded.call(this)):this.lightbox_body.load(b,a.proxy(function(){return e.$element.trigger("loaded.bs.modal")})),this.modal_arrows&&this.modal_arrows.css("display","none"),this},isExternal:function(a){var b;return b=a.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/),"string"==typeof b[1]&&b[1].length>0&&b[1].toLowerCase()!==location.protocol?!0:"string"==typeof b[2]&&b[2].length>0&&b[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"),"")!==location.host?!0:!1},error:function(a){return this.lightbox_body.html(a),this},preloadImage:function(b,c){var d,e=this;return d=new Image,(null==c||c===!0)&&(d.onload=function(){var b;return b=a(""),b.attr("src",d.src),b.addClass("img-responsive"),e.lightbox_body.html(b),e.modal_arrows&&e.modal_arrows.css("display","block"),b.load(function(){return e.resize(d.width),e.options.onContentLoaded.call(e)})},d.onerror=function(){return e.error("Failed to load image: "+b)}),d.src=b,d},resize:function(b){var c;return c=b+this.border.left+this.padding.left+this.padding.right+this.border.right,this.modal_dialog.css("width","auto").css("max-width",c),this.lightbox_container.find("a").css("line-height",function(){return a(this).parent().height()+"px"}),this},checkDimensions:function(a){var b,c;return c=a+this.border.left+this.padding.left+this.padding.right+this.border.right,b=document.body.clientWidth,c>b&&(a=this.modal_body.width()),a},close:function(){return this.modal.modal("hide")},addTrailingSlash:function(a){return"/"!==a.substr(-1)&&(a+="/"),a}},a.fn.ekkoLightbox=function(c){return this.each(function(){var d;return d=a(this),c=a.extend({remote:d.attr("data-remote")||d.attr("href"),gallery_parent_selector:d.attr("data-parent"),type:d.attr("data-type")},c,d.data()),new b(this,c),this})},a.fn.ekkoLightbox.defaults={gallery_parent_selector:"document.body",left_arrow_class:".glyphicon .glyphicon-chevron-left",right_arrow_class:".glyphicon .glyphicon-chevron-right",directional_arrows:!0,type:null,always_show_close:!0,loadingMessage:"Loading...",onShow:function(){},onShown:function(){},onHide:function(){},onHidden:function(){},onNavigate:function(){},onContentLoaded:function(){}}}).call(this); \ No newline at end of file +(function(){"use strict";var a,b;a=jQuery,b=function(b,c){var d,e,f,g=this;return this.options=a.extend({title:null,footer:null,remote:null},a.fn.ekkoLightbox.defaults,c||{}),this.$element=a(b),d="",this.modal_id=this.options.modal_id?this.options.modal_id:"ekkoLightbox-"+Math.floor(1e3*Math.random()+1),f='",e='",a(document.body).append('"),this.modal=a("#"+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(){return g.modal_shown(),g.options.onShown.call(g)}).on("hide.bs.modal",this.options.onHide.bind(this)).on("hidden.bs.modal",function(){return g.gallery&&a(document).off("keydown.ekkoLightbox"),g.modal.remove(),g.options.onHidden.call(g)}).modal("show",c),this.modal},b.prototype={modal_shown:function(){var b,c,d=this;return this.options.remote?(this.gallery=this.$element.data("gallery"),this.gallery&&("document.body"===this.options.gallery_parent_selector||""===this.options.gallery_parent_selector?this.gallery_items=a(document.body).find('*[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),a(document).on("keydown.ekkoLightbox",this.navigate.bind(this)),this.options.directional_arrows&&this.gallery_items.length>1&&(this.options.preview&&(b=a('
'),a.each(this.gallery_items,function(c,e){var f,g,h,i;switch(d.detectRemoteType(a(e).attr("href")),f=a('
'),a(e).attr("href")===d.$element.attr("href")&&f.addClass("active"),f.on("click",function(a){return a.preventDefault(),d.gallery_index=c,d.navigateTo(d.gallery_index)}),d.options.type){case"image":i=new Image,i.src=a(e).attr("href"),a(i).attr("width","100%"),f.append(i);break;case"youtube":case"vimeo":case"video":g=a(''),h=a('').html(d.options.type),g.append(h),f.append(g);break;default:g=a(''),h=a('').html(d.options.type),g.append(h),f.append(g)}return b.append(f)}),a("preview-items").length?a("preview-items").html(b):this.modal_body.append(b)),this.lightbox_container.append('
'),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(a){return a.preventDefault(),d.navigate_left()}),this.lightbox_container.find("a"+this.strip_spaces(this.options.right_arrow_class)).on("click",function(a){return a.preventDefault(),d.navigate_right()}))),this.options.type?"image"===this.options.type?this.preloadImage(this.options.remote,!0):"youtube"===this.options.type&&(c=this.getYoutubeId(this.options.remote))?this.showYoutubeVideo(c):"vimeo"===this.options.type?this.showVimeoVideo(this.options.remote):"instagram"===this.options.type?this.showInstagramVideo(this.options.remote):"url"===this.options.type?this.loadRemoteContent(this.options.remote):"video"===this.options.type?this.showVideoIframe(this.options.remote):this.error('Could not detect remote target type. Force the type using data-type="image|youtube|vimeo|instagram|url|video"'):this.detectRemoteType(this.options.remote)):this.error("No remote target given")},strip_stops:function(a){return a.replace(/\./g,"")},strip_spaces:function(a){return a.replace(/\s/g,"")},isImage:function(a){return a.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)},isSwf:function(a){return a.match(/\.(swf)((\?|#).*)?$/i)},getYoutubeId:function(a){var b;return b=a.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/),b&&11===b[2].length?b[2]:!1},getVimeoId:function(a){return a.indexOf("vimeo")>0?a:!1},getInstagramId:function(a){return a.indexOf("instagram")>0?a:!1},navigate:function(a){if(a=a||window.event,39===a.keyCode||37===a.keyCode){if(39===a.keyCode)return this.navigate_right();if(37===a.keyCode)return this.navigate_left()}},navigateTo:function(b){var c,d;return 0>b||b>this.gallery_items.length-1?this:(this.options.preview&&(a(".preview-item").removeClass("active"),a(".preview-item:nth-child("+(b+1)+")").addClass("active")),this.showLoading(),this.gallery_index=b,this.$element=a(this.gallery_items.get(this.gallery_index)),this.updateTitleAndFooter(),d=this.$element.attr("data-remote")||this.$element.attr("href"),this.detectRemoteType(d,this.$element.attr("data-type")||!1),this.gallery_index+1'+this.options.loadingMessage+"
"),this},showYoutubeVideo:function(a){var b,c,d;return c=null!=this.$element.attr("data-norelated")||this.options.no_related?"&rel=0":"",d=this.checkDimensions(this.$element.data("width")||560),b=d/(560/315),this.showVideoIframe("//www.youtube.com/embed/"+a+"?badge=0&autoplay=1&html5=1"+c,d,b)},showVimeoVideo:function(a){var b,c;return c=this.checkDimensions(this.$element.data("width")||560),b=c/(500/281),this.showVideoIframe(a+"?autoplay=1",c,b)},showInstagramVideo:function(a){var b,c;return c=this.checkDimensions(this.$element.data("width")||612),this.resize(c),b=c+80,this.lightbox_body.html(''),this.options.onContentLoaded.call(this),this.modal_arrows?this.modal_arrows.css("display","none"):void 0},showVideoIframe:function(a,b,c){return c=c||b,this.resize(b),this.lightbox_body.html('
'),this.options.onContentLoaded.call(this),this.modal_arrows&&this.modal_arrows.css("display","none"),this},loadRemoteContent:function(b){var c,d,e=this;return d=this.$element.data("width")||560,this.resize(d),c=this.$element.data("disableExternalCheck")||!1,c||this.isExternal(b)?(this.lightbox_body.html(''),this.options.onContentLoaded.call(this)):this.lightbox_body.load(b,a.proxy(function(){return e.$element.trigger("loaded.bs.modal")})),this.modal_arrows&&this.modal_arrows.css("display","none"),this},isExternal:function(a){var b;return b=a.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/),"string"==typeof b[1]&&b[1].length>0&&b[1].toLowerCase()!==location.protocol?!0:"string"==typeof b[2]&&b[2].length>0&&b[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"),"")!==location.host?!0:!1},error:function(a){return this.lightbox_body.html(a),this},preloadImage:function(b,c){var d,e=this;return d=new Image,(null==c||c===!0)&&(d.onload=function(){var b;return b=a(""),b.attr("src",d.src),b.addClass("img-responsive"),e.lightbox_body.html(b),e.modal_arrows&&e.modal_arrows.css("display","block"),b.load(function(){return e.resize(d.width),e.options.onContentLoaded.call(e)})},d.onerror=function(){return e.error("Failed to load image: "+b)}),d.src=b,d},resize:function(b){var c;return c=b+this.border.left+this.padding.left+this.padding.right+this.border.right,this.modal_dialog.css("width","auto").css("max-width",c),this.lightbox_container.find("a").css("line-height",function(){return a(this).parent().height()+"px"}),this},checkDimensions:function(a){var b,c;return c=a+this.border.left+this.padding.left+this.padding.right+this.border.right,b=document.body.clientWidth,c>b&&(a=this.modal_body.width()),a},close:function(){return this.modal.modal("hide")},addTrailingSlash:function(a){return"/"!==a.substr(-1)&&(a+="/"),a}},a.fn.ekkoLightbox=function(c){return this.each(function(){var d;return d=a(this),c=a.extend({remote:d.attr("data-remote")||d.attr("href"),gallery_parent_selector:d.attr("data-parent"),type:d.attr("data-type"),preview:d.attr("data-preview"),no_related:d.attr("data-norelated")?!1:void 0},c,d.data()),new b(this,c),this})},a.fn.ekkoLightbox.defaults={gallery_parent_selector:"document.body",left_arrow_class:".glyphicon .glyphicon-chevron-left",right_arrow_class:".glyphicon .glyphicon-chevron-right",directional_arrows:!0,type:null,always_show_close:!0,no_related:!1,loadingMessage:"Loading...",onShow:function(){},onShown:function(){},onHide:function(){},onHidden:function(){},onNavigate:function(){},onContentLoaded:function(){}}}).call(this); \ No newline at end of file diff --git a/ekko-lightbox.coffee b/ekko-lightbox.coffee index bc648f0..4386e42 100644 --- a/ekko-lightbox.coffee +++ b/ekko-lightbox.coffee @@ -23,7 +23,7 @@ EkkoLightbox = ( element, options ) -> header = '' footer = '' $(document.body).append '' - + @modal = $ '#' + @modal_id @modal_dialog = @modal.find('.modal-dialog').first() @modal_content = @modal.find('.modal-content').first() @@ -63,7 +63,7 @@ EkkoLightbox = ( element, options ) -> .modal 'show', options @modal - + EkkoLightbox.prototype = { modal_shown: -> # when the modal first loads @@ -79,10 +79,52 @@ EkkoLightbox.prototype = { else @gallery_items = @$element.parents(this.options.gallery_parent_selector).first().find('*[data-gallery="' + @gallery + '"]') @gallery_index = @gallery_items.index(@$element) + $(document).on 'keydown.ekkoLightbox', @navigate.bind(@) # add the directional arrows to the modal if @options.directional_arrows && @gallery_items.length > 1 + + # add optins.preview + if @options.preview + $list = $('
') + + $.each @gallery_items, (i, item) => + @detectRemoteType($(item).attr('href')) + $col = $('
') + $col.addClass('active') if $(item).attr('href') == @$element.attr('href') + $col.on 'click', (evt) => + evt.preventDefault() + @gallery_index = i + @navigateTo(@gallery_index) + + switch @options.type + when "image" + image = new Image + image.src = $(item).attr('href') + $(image).attr('width', '100%') + $col.append image + when "youtube","vimeo", "video" + $icon = $('') + $title = $('').html(@options.type) + $icon.append($title) + $col.append $icon + else + $icon = $('') + $title = $('').html(@options.type) + $icon.append($title) + $col.append $icon + $list.append $col + + + + + if $('preview-items').length + $('preview-items').html($list) + else + @modal_body.append($list) + + @lightbox_container.append('
') @modal_arrows = @lightbox_container.find('div.ekko-lightbox-nav-overlay').first() @lightbox_container.find('a'+@strip_spaces(@options.left_arrow_class)).on 'click', (event) => @@ -146,6 +188,10 @@ EkkoLightbox.prototype = { return @ if index < 0 or index > @gallery_items.length-1 + if @options.preview + $('.preview-item').removeClass('active') + $('.preview-item:nth-child(' + (index+1) + ')').addClass('active') + @showLoading() @gallery_index = index @@ -168,7 +214,7 @@ EkkoLightbox.prototype = { if @gallery_items.length == 1 then return if @gallery_index == 0 then @gallery_index = @gallery_items.length-1 else @gallery_index-- #circular - @options.onNavigate.call(@, 'left', @gallery_index) + @options.onNavigate.call(@, 'left', @gallery_index) @navigateTo(@gallery_index) navigate_right: -> @@ -333,6 +379,8 @@ $.fn.ekkoLightbox = ( options ) -> remote : $this.attr('data-remote') || $this.attr('href') gallery_parent_selector : $this.attr('data-parent') type : $this.attr('data-type') + preview : $this.attr('data-preview') + no_related : false if $this.attr('data-norelated') }, options, $this.data()) new EkkoLightbox(@, options) @ diff --git a/ekko-lightbox.less b/ekko-lightbox.less index 166166d..2d1ebc0 100644 --- a/ekko-lightbox.less +++ b/ekko-lightbox.less @@ -61,4 +61,47 @@ .modal-footer { text-align: left; } + + .preview-items { + padding-right: 0; + margin-left: -15px; + overflow: hidden; + overflow-x: auto; + height: 130px; + } + + .preview-item { + margin-top: 15px; + cursor: pointer; + padding-right: 0; + opacity: 0.4; + } + + .preview-item.active { + opacity: 1; + } + + .preview-item { + text-align: center; + .glyphicon { + position: relative; + font-size: 30px; + width: 100%; + padding-top: 28px; + padding-bottom: 30px; + color: #828282; + + .title { + position: absolute; + font-family: sans-serif; + font-size: 10px; + text-transform: uppercase; + letter-spacing: 1px; + width: 100%; + bottom: 20px; + left: 0; + } + } + } + } \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 5bfd1e0..b50026f 100644 --- a/examples/index.html +++ b/examples/index.html @@ -82,6 +82,8 @@

Implementation

If you plan on having galleries, be sure to include the LESS / CSS files.

+
+

Options

Options are passed down to the modal object so you can also use any of the original modal options.

Pass the options to the calling function as an object, or set defaults using $.fn.ekkoLightbox.defaults (excluding modal default options, notable: title, footer, remote)

@@ -174,6 +176,14 @@

Options

Don't show related videos when finished playing data-norelated + + + preview + boolean + false + Show image gallery items preview in a lightbox window + +
@@ -202,6 +212,7 @@

Events

+

Themes

@@ -231,6 +242,7 @@

Examples

  • Example #15: Hidden elements
  • Example #16: Remote content
  • Example #17: navigateTo
    • +
  • Example #18: Gallery of Images with preview via data-preview="true"

    • Example #1: Single Image

    @@ -525,6 +537,40 @@

    Example #17: navigateTo

    + +

    Example #18: Gallery of Images with preview

    +

    Set data-preview="true" for each gallery item you would like to show in a preview section

    +
    +
    +
    + + + + + + + + + +
    +
    +
    +
    + + + + + + + + + +
    +
    +
    +
    +
    +