imagelightbox - npm Package Compare versions

Comparing version 0.10.0 to 0.11.0

.eslintrc.json

@@ -0,0 +0,0 @@ {

CHANGELOG.md

@@ -10,2 +10,6 @@ # Changelog
 
+## [0.11.0] - 2018-09-15
+
+- Added video functionality (@genabitu)
+
 ## [0.10.0] - 2018-06-29
@@ -174,3 +178,4 @@
 
-[Unreleased]: https://github.com/rejas/imagelightbox/compare/0.10.0...HEAD
+[Unreleased]: https://github.com/rejas/imagelightbox/compare/0.11.0...HEAD
+[0.11.0]: https://github.com/rejas/imagelightbox/compare/0.10.0...0.11.0
 [0.10.0]: https://github.com/rejas/imagelightbox/compare/0.9.1...0.10.0
@@ -177,0 +182,0 @@ [0.9.1]: https://github.com/rejas/imagelightbox/compare/0.9.0...0.9.1

dist/imagelightbox.min.js

@@ -1,1 +0,1 @@
-!function(e){"object"==typeof module&&"object"==typeof module.exports?e(require("jquery"),window,document):e(jQuery,window,document)}(function(R,D,M){"use strict";var z=R("<div/>").attr("class","imagelightbox-loading").append(R("<div/>")),e=R("<button/>",{type:"button",class:"imagelightbox-arrow imagelightbox-arrow-left"}),t=R("<button/>",{type:"button",class:"imagelightbox-arrow imagelightbox-arrow-right"}),X=e.add(t),j=R("<div/>",{class:"imagelightbox-caption",html:"&nbsp;"}),N=R("<a/>",{class:"imagelightbox-close"}),U=R("<div/>",{class:"imagelightbox-overlay"}),K=R("<a/>",{href:"#",class:"imagelightbox-navitem"}),Y=R("<div/>",{class:"imagelightbox-nav"}),_=R("<div/>",{class:"imagelightbox-wrapper"}),$=R("body"),o=function(){var e=M.body||M.documentElement;return""===(e=e.style).WebkitTransition?"-webkit-":""===e.MozTransition?"-moz-":""===e.OTransition?"-o-":""===e.transition&&""},B=!1!==o(),H=function(e,t,i){var n={},a=o();n[a+"transform"]="translateX("+t+") translateY(-50%)",n[a+"transition"]=a+"transform "+i+"s linear",e.css(n)},Q="ontouchstart"in D,W=D.navigator.pointerEnabled||D.navigator.msPointerEnabled,A=function(e){if(Q)return!0;if(!W||void 0===e||void 0===e.pointerType)return!1;if(void 0!==e.MSPOINTER_TYPE_MOUSE){if(e.MSPOINTER_TYPE_MOUSE!==e.pointerType)return!0}else if("mouse"!==e.pointerType)return!0;return!1},G=!1!=!!(M.fullscreenEnabled||M.webkitFullscreenEnabled||M.mozFullScreenEnabled||M.msFullscreenEnabled),J=!(!D.history||!history.pushState);R.fn.imageLightbox=function(e){var i="",r=R([]),l=R(),c=-1,s=R(this),u=R(),g=0,f=0,o=0,p=!1,n=0,d=R.extend({selector:"a[data-imagelightbox]",id:"imagelightbox",allowedTypes:"png|jpg|jpeg|gif",animationSpeed:250,activity:!1,arrows:!1,button:!1,caption:!1,enableKeyboard:!0,history:!1,fullscreen:!1,gutter:10,offsetY:0,navigation:!1,overlay:!1,preloadNext:!0,quitOnEnd:!1,quitOnImgClick:!1,quitOnDocClick:!0,quitOnEscKey:!0},e),h=function(){d.activity&&w(),d.arrows&&X.css("display","block")},a=function(e,t,i){var n=t+"="+i,a="?"+n;if(e){var o=new RegExp("([?&])"+t+"=[^&]*");a=null!==e.match(o)?e.replace(o,"$1"+n):e+"&"+n}return a},b=function(){if(J&&d.history){var e=r[c].dataset.ilb2Id;e||(e=c);var t={imageLightboxIndex:e},i=r[c].dataset.imagelightbox;i&&(t.imageLightboxSet=i);var n=a(M.location.search,"imageLightboxIndex",e);i&&(n=a(n,"imageLightboxSet",i)),D.history.pushState(t,"",n)}},t=function(e,t){var i=e;if(i){var n=new RegExp("[?]"+t+"=[^&]*"),a=new RegExp("&"+t+"=[^&]*");i=(i=i.replace(n,"?")).replace(a,"")}return i},m=function(e){var t=new RegExp("[?&]"+e+"(=([^&#]*)|&|#|$)").exec(M.location.search);if(t&&t[2])return decodeURIComponent(t[2].replace(/\+/g," "))},v=function(){if(--c<0){if(!0===d.quitOnEnd)return L(),!1;c=r.length-1}l=r.eq(c),b(),_.trigger("previous.ilb2"),C(1)},x=function(){if(++c>=r.length){if(!0===d.quitOnEnd)return L(),!1;c=0}b(),l=r.eq(c),_.trigger("next.ilb2"),C(-1)},y=function(){_.append(z)},w=function(){R(".imagelightbox-loading").remove()},E=function(){_.append(U)},q=function(){N.appendTo(_).on("click.ilb7",function(){return L(),!1})},S=function(){j.html("&nbsp;"),R(l).data("ilb2-caption")?j.html(R(l).data("ilb2-caption")):0<R(l).find("img").length&&j.html(R(l).find("img").attr("alt"))},k=function(){if(r.length){for(var e=0;e<r.length;e++)Y.append(K.clone());var t=Y.children("a");t.eq(r.index(l)).addClass("active"),_.on("previous.ilb2 next.ilb2",function(){t.removeClass("active").eq(r.index(l)).addClass("active")}),_.append(Y),Y.on("click.ilb7 touchend.ilb7",function(){return!1}).on("click.ilb7 touchend.ilb7","a",function(){var e=R(this);if(r.eq(e.index()).attr("href")!==R(".imagelightbox").attr("src")){var t=r.eq(e.index());t.length&&(n=r.index(l),l=t,C(e.index()<n?-1:1))}e.addClass("active").siblings().removeClass("active")})}},I=function(){_.append(X),X.on("click.ilb7 touchend.ilb7",function(e){return e.stopImmediatePropagation(),e.preventDefault(),R(this).hasClass("imagelightbox-arrow-left")?v():x(),!1})},O=function(){if(!u.length)return!0;var e=d.caption?j.outerHeight():0,a=R(D).width(),o=R(D).height()-e,r=Math.abs(1-d.gutter/100),l=new Image;l.src=u.attr("src"),l.onload=function(){if(g=l.width,f=l.height,a<g||o<f){var e=a/o<g/f?g/a:f/o;g/=e,f/=e}var t=f*r,i=g*r,n=(R(D).width()-i)/2;u.css({width:i+"px",height:t+"px",left:n+"px"})}},C=function(a){if(p)return!1;if(u.length){var e={opacity:0};B?H(u,100*a-o+"px",d.animationSpeed/1e3):e.left=parseInt(u.css("left"))+100*a+"px",u.animate(e,d.animationSpeed,function(){T()}),o=0}p=!0,d.activity&&y(),d.caption&&S(),setTimeout(function(){var e=l.attr("href"),t=0,i=0,n=0;u=R("<img id='"+d.id+"' />").attr("src",e).on("load.ilb7",function(){var e={opacity:1};if(u.appendTo(_),O(),u.css("opacity",0),B)H(u,-100*a+"px",0),setTimeout(function(){H(u,"0px",d.animationSpeed/1e3)},50);else{var t=parseInt(u.css("left"));e.left=t+"px",u.css("left",t-100*a+"px")}if(u.animate(e,d.animationSpeed,function(){p=!1,h()}),d.preloadNext){var i=r.eq(r.index(l)+1);i.length||(i=r.eq(0)),R("<img />").attr("src",i.attr("href"))}_.trigger("loaded.ilb2")}).on("error.ilb7",function(){h()}).on(W?"pointerup.ilb7 MSPointerUp.ilb7":"click.ilb7",function(e){return e.preventDefault(),d.quitOnImgClick?(L(),!1):!!A(e.originalEvent)||void((e.pageX||e.originalEvent.pageX)-e.target.offsetLeft<g/2?v():x())}).on("touchstart.ilb7 pointerdown.ilb7 MSPointerDown.ilb7",function(e){if(!A(e.originalEvent)||d.quitOnImgClick)return!0;B&&(n=parseInt(u.css("left"))),t=e.originalEvent.pageX||e.originalEvent.touches[0].pageX}).on("touchmove.ilb7 pointermove.ilb7 MSPointerMove.ilb7",function(e){if(!W&&"pointermove"===e.type||!A(e.originalEvent)||d.quitOnImgClick)return!0;e.preventDefault(),i=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,o=t-i,B?H(u,-o+"px",0):u.css("left",n-o+"px")}).on("touchend.ilb7 touchcancel.ilb7 pointerup.ilb7 pointercancel.ilb7 MSPointerUp.ilb7 MSPointerCancel.ilb7",function(e){if(!A(e.originalEvent)||d.quitOnImgClick)return!0;50<Math.abs(o)?o<0?v():x():B?H(u,"0px",d.animationSpeed/1e3):u.animate({left:n+"px"},d.animationSpeed/2)})},d.animationSpeed+100)},T=function(){if(!u.length)return!1;u.remove(),u=R()},F=function(e,t){if(p)return!1;p=!1,l=e,c=r.index(l),t||b(),function(){d.arrows&&I(this),d.navigation&&k(),d.overlay&&E(),d.button&&q(),d.caption&&_.append(j)}(),$.append(_).addClass("imagelightbox-open"),_.trigger("start.ilb2"),C(0)},L=function(e){if(c=-1,e||function(){if(J&&d.history){var e=t(M.location.search,"imageLightboxIndex");e=t(e,"imageLightboxSet"),D.history.pushState({},"",e)}}(),_.trigger("quit.ilb2"),$.removeClass("imagelightbox-open"),!u.length)return!1;u.animate({opacity:0},d.animationSpeed,function(){T(),p=!1,r=R([]),_.remove().find("*").remove()})},P=function(t){t.on("click.ilb7",{set:i},function(e){e.preventDefault(),i=R(e.currentTarget).data("imagelightbox"),t.filter(function(){return R(this).data("imagelightbox")===i}).filter(function(){return e=R(this),"a"===R(e).prop("tagName").toLowerCase()&&new RegExp(".("+d.allowedTypes+")$","i").test(R(e).attr("href"));var e}).each(function(){r=r.add(R(this))}),r.length<1?L():F(R(this))})};return R(D).on("resize.ilb7",O),J&&d.history&&R(D).on("popstate",function(e){var t=e.originalEvent.state;if(t){var i=t.imageLightboxIndex;if(void 0!==i){var n=s.filter('[data-ilb2-id="'+i+'"]');if(0<n.length)var a=s.index(n);else n=R(s[a=i]);if(n[0]&&(!t.imageLightboxSet||t.imageLightboxSet===n[0].dataset.imagelightbox)){if(c<0)return r=s,void F(n,!0);var o=1;c<a&&(o=-1),l=n,c=a,C(o)}}else L(!0)}else L(!0)}),R(M).ready(function(){d.quitOnDocClick&&R(M).on(Q?"touchend.ilb7":"click.ilb7",function(e){u.length&&!R(e.target).is(u)&&(e.preventDefault(),L())}),d.fullscreen&&G&&R(M).on("keydown.ilb7",function(e){if(!u.length)return!0;var t;-1<[9,32,38,40].indexOf(e.which)&&(e.stopPropagation(),e.preventDefault()),-1<[13].indexOf(e.which)&&(e.stopPropagation(),e.preventDefault(),(t=M.getElementById(d.id).parentElement).requestFullscreen?t.requestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),M.exitFullscreen?M.exitFullscreen():M.mozCancelFullScreen?M.mozCancelFullScreen():M.webkitExitFullscreen&&M.webkitExitFullscreen())}),d.enableKeyboard&&R(M).on("keydown.ilb7",function(e){if(!u.length)return!0;-1<[27].indexOf(e.which)&&d.quitOnEscKey&&(e.stopPropagation(),e.preventDefault(),L()),-1<[37].indexOf(e.which)&&(e.stopPropagation(),e.preventDefault(),v()),-1<[39].indexOf(e.which)&&(e.stopPropagation(),e.preventDefault(),x())})}),R(M).off("click",d.selector),P(s),function(){if(J&&d.history){var e=m("imageLightboxIndex");if(e){var t=(r=s).filter('[data-ilb2-id="'+e+'"]');0<t.length?c=r.index(t):t=R(r[c=e]);var i=m("imageLightboxSet");!t[0]||i&&i!==t[0].dataset.imagelightbox||F(t,!0)}}}(),this.addToImageLightbox=function(e){P(e)},this.loadPreviousImage=function(){v()},this.loadNextImage=function(){x()},this.quitImageLightbox=function(){return L(),this},this.startImageLightbox=function(e){e?e.trigger("click.ilb7"):R(this).trigger("click.ilb7")},this}});
+!function(e){"object"==typeof module&&"object"==typeof module.exports?e(require("jquery"),window,document):e(jQuery,window,document)}(function(D,M,z){"use strict";var X=D("<div/>").attr("class","imagelightbox-loading").append(D("<div/>")),e=D("<button/>",{type:"button",class:"imagelightbox-arrow imagelightbox-arrow-left"}),t=D("<button/>",{type:"button",class:"imagelightbox-arrow imagelightbox-arrow-right"}),j=e.add(t),N=D("<div/>",{class:"imagelightbox-caption",html:"&nbsp;"}),U=D("<a/>",{class:"imagelightbox-close"}),K=D("<div/>",{class:"imagelightbox-overlay"}),Y=D("<a/>",{href:"#",class:"imagelightbox-navitem"}),_=D("<div/>",{class:"imagelightbox-nav"}),V=D("<div/>",{class:"imagelightbox-wrapper"}),W=D("body"),o=function(){var e=z.body||z.documentElement;return""===(e=e.style).WebkitTransition?"-webkit-":""===e.MozTransition?"-moz-":""===e.OTransition?"-o-":""===e.transition&&""},$=!1!==o(),H=function(e,t,i){var n={},a=o();n[a+"transform"]="translateX("+t+") translateY(-50%)",n[a+"transition"]=a+"transform "+i+"s linear",e.css(n)},B="ontouchstart"in M,Q=M.navigator.pointerEnabled||M.navigator.msPointerEnabled,A=function(e){if(B)return!0;if(!Q||void 0===e||void 0===e.pointerType)return!1;if(void 0!==e.MSPOINTER_TYPE_MOUSE){if(e.MSPOINTER_TYPE_MOUSE!==e.pointerType)return!0}else if("mouse"!==e.pointerType)return!0;return!1},G=!1!=!!(z.fullscreenEnabled||z.webkitFullscreenEnabled||z.mozFullScreenEnabled||z.msFullscreenEnabled),J=!(!M.history||!history.pushState);D.fn.imageLightbox=function(e){var i="",c=D([]),s=D(),u=D([]),r=-1,l=D(this),g=D(),d=0,f=0,h=0,p=!1,n=0,b=D.extend({selector:"a[data-imagelightbox]",id:"imagelightbox",allowedTypes:"png|jpg|jpeg|gif",animationSpeed:250,activity:!1,arrows:!1,button:!1,caption:!1,enableKeyboard:!0,history:!1,fullscreen:!1,gutter:10,offsetY:0,navigation:!1,overlay:!1,preloadNext:!0,quitOnEnd:!1,quitOnImgClick:!1,quitOnDocClick:!0,quitOnEscKey:!0},e),m=function(){b.activity&&E(),b.arrows&&j.css("display","block")},a=function(e,t,i){var n=t+"="+i,a="?"+n;if(e){var o=new RegExp("([?&])"+t+"=[^&]*");a=null!==e.match(o)?e.replace(o,"$1"+n):e+"&"+n}return a},o=function(){if(J&&b.history){var e=c[r].dataset.ilb2Id;e||(e=r);var t={imageLightboxIndex:e},i=c[r].dataset.imagelightbox;i&&(t.imageLightboxSet=i);var n=a(z.location.search,"imageLightboxIndex",e);i&&(n=a(n,"imageLightboxSet",i)),M.history.pushState(t,"",n)}},t=function(e,t){var i=e;if(i){var n=new RegExp("[?]"+t+"=[^&]*"),a=new RegExp("&"+t+"=[^&]*");i=(i=i.replace(n,"?")).replace(a,"")}return i},v=function(e){var t=new RegExp("[?&]"+e+"(=([^&#]*)|&|#|$)").exec(z.location.search);if(t&&t[2])return decodeURIComponent(t[2].replace(/\+/g," "))},x=function(){if(--r<0){if(!0===b.quitOnEnd)return P(),!1;r=c.length-1}s=c.eq(r),o(),V.trigger("previous.ilb2"),T(1)},y=function(){if(++r>=c.length){if(!0===b.quitOnEnd)return P(),!1;r=0}o(),s=c.eq(r),V.trigger("next.ilb2"),T(-1)},w=function(){V.append(X)},E=function(){D(".imagelightbox-loading").remove()},q=function(){V.append(K)},S=function(){U.appendTo(V).on("click.ilb7",function(){return P(),!1})},k=function(){N.html("&nbsp;"),D(s).data("ilb2-caption")?N.html(D(s).data("ilb2-caption")):0<D(s).find("img").length&&N.html(D(s).find("img").attr("alt"))},I=function(){if(c.length){for(var e=0;e<c.length;e++)_.append(Y.clone());var t=_.children("a");t.eq(c.index(s)).addClass("active"),V.on("previous.ilb2 next.ilb2",function(){t.removeClass("active").eq(c.index(s)).addClass("active")}),V.append(_),_.on("click.ilb7 touchend.ilb7",function(){return!1}).on("click.ilb7 touchend.ilb7","a",function(){var e=D(this);if(c.eq(e.index()).attr("href")!==D(".imagelightbox").attr("src")){var t=c.eq(e.index());t.length&&(n=c.index(s),s=t,T(e.index()<n?-1:1))}e.addClass("active").siblings().removeClass("active")})}},O=function(){V.append(j),j.on("click.ilb7 touchend.ilb7",function(e){return e.stopImmediatePropagation(),e.preventDefault(),D(this).hasClass("imagelightbox-arrow-left")?x():y(),!1})},C=function(){if(!g.length)return!0;var e=b.caption?N.outerHeight():0,a=D(M).width(),o=D(M).height()-e,r=Math.abs(1-b.gutter/100);function t(){if(a<d||o<f){var e=a/o<d/f?d/a:f/o;d/=e,f/=e}var t=f*r,i=d*r,n=(D(M).width()-i)/2;g.css({width:i+"px",height:t+"px",left:n+"px"})}if(void 0!==g.get(0).videoWidth)return d=g.get(0).videoWidth,f=g.get(0).videoHeight,void t();var i=new Image;i.src=g.attr("src"),i.onload=function(){d=i.width,f=i.height,t()}},T=function(l){if(p)return!1;if(g.length){var e={opacity:0};$?H(g,100*l-h+"px",b.animationSpeed/1e3):e.left=parseInt(g.css("left"))+100*l+"px",g.animate(e,b.animationSpeed,function(){F()}),h=0}p=!0,b.activity&&w(),b.caption&&k(),setTimeout(function(){var e,t,i=s.attr("href"),n=0,a=0,o=0;function r(){var e={opacity:1};if(g.appendTo(V),C(),g.css("opacity",0),$)H(g,-100*l+"px",0),setTimeout(function(){H(g,"0px",b.animationSpeed/1e3)},50);else{var t=parseInt(g.css("left"));e.left=t+"px",g.css("left",t-100*l+"px")}if(g.animate(e,b.animationSpeed,function(){p=!1,m()}),b.preloadNext){var i=c.eq(c.index(s)+1);i.length||(i=c.eq(0)),D("<img />").attr("src",i.attr("href"))}V.trigger("loaded.ilb2")}s.data("ilb2Video")?u.each(function(){this.e.attr("id")===b.id&&(e=this.l,t=this.e,this.a&&(!1===e&&t.attr("autoplay",this.a),!0===e&&t.get(0).play()))}):t=D("<img id='"+b.id+"' />").attr("src",i),g=t.on("load.ilb7",r).on("error.ilb7",function(){m()}).on(Q?"pointerup.ilb7 MSPointerUp.ilb7":"click.ilb7",function(e){return e.preventDefault(),b.quitOnImgClick?(P(),!1):!!A(e.originalEvent)||void((e.pageX||e.originalEvent.pageX)-e.target.offsetLeft<d/2?x():y())}).on("touchstart.ilb7 pointerdown.ilb7 MSPointerDown.ilb7",function(e){if(!A(e.originalEvent)||b.quitOnImgClick)return!0;$&&(o=parseInt(g.css("left"))),n=e.originalEvent.pageX||e.originalEvent.touches[0].pageX}).on("touchmove.ilb7 pointermove.ilb7 MSPointerMove.ilb7",function(e){if(!Q&&"pointermove"===e.type||!A(e.originalEvent)||b.quitOnImgClick)return!0;e.preventDefault(),a=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,h=n-a,$?H(g,-h+"px",0):g.css("left",o-h+"px")}).on("touchend.ilb7 touchcancel.ilb7 pointerup.ilb7 pointercancel.ilb7 MSPointerUp.ilb7 MSPointerCancel.ilb7",function(e){if(!A(e.originalEvent)||b.quitOnImgClick)return!0;50<Math.abs(h)?h<0?x():y():$?H(g,"0px",b.animationSpeed/1e3):g.animate({left:o+"px"},b.animationSpeed/2)}),!0===e&&r(),!1===e&&(g=g.on("loadedmetadata.ilb7",r))},b.animationSpeed+100)},F=function(){if(!g.length)return!1;g.remove(),g=D()},L=function(e,t){if(p)return!1;p=!1,s=e,r=c.index(s),t||o(),function(){b.arrows&&O(this),b.navigation&&I(),b.overlay&&q(),b.button&&S(),b.caption&&V.append(N)}(),W.append(V).addClass("imagelightbox-open"),V.trigger("start.ilb2"),T(0)},P=function(e){if(r=-1,e||function(){if(J&&b.history){var e=t(z.location.search,"imageLightboxIndex");e=t(e,"imageLightboxSet"),M.history.pushState({},"",e)}}(),V.trigger("quit.ilb2"),W.removeClass("imagelightbox-open"),!g.length)return!1;g.animate({opacity:0},b.animationSpeed,function(){F(),p=!1,c=D([]),V.remove().find("*").remove()})},R=function(t){t.on("click.ilb7",{set:i},function(e){e.preventDefault(),i=D(e.currentTarget).data("imagelightbox"),t.filter(function(){return D(this).data("imagelightbox")===i}).filter(function(){return e=D(this),"a"===D(e).prop("tagName").toLowerCase()&&(new RegExp(".("+b.allowedTypes+")$","i").test(D(e).attr("href"))||D(e).data("ilb2Video"));var e}).each(function(){c=c.add(D(this))}),c.length<1?P():L(D(this))})};return D(M).on("resize.ilb7",C),J&&b.history&&D(M).on("popstate",function(e){var t=e.originalEvent.state;if(t){var i=t.imageLightboxIndex;if(void 0!==i){var n=l.filter('[data-ilb2-id="'+i+'"]');if(0<n.length)var a=l.index(n);else n=D(l[a=i]);if(n[0]&&(!t.imageLightboxSet||t.imageLightboxSet===n[0].dataset.imagelightbox)){if(r<0)return c=l,void L(n,!0);var o=1;r<a&&(o=-1),s=n,r=a,T(o)}}else P(!0)}else P(!0)}),D(z).ready(function(){b.quitOnDocClick&&D(z).on(B?"touchend.ilb7":"click.ilb7",function(e){g.length&&!D(e.target).is(g)&&(e.preventDefault(),P())}),b.fullscreen&&G&&D(z).on("keydown.ilb7",function(e){if(!g.length)return!0;var t;-1<[9,32,38,40].indexOf(e.which)&&(e.stopPropagation(),e.preventDefault()),-1<[13].indexOf(e.which)&&(e.stopPropagation(),e.preventDefault(),(t=z.getElementById(b.id).parentElement).requestFullscreen?t.requestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),z.exitFullscreen?z.exitFullscreen():z.mozCancelFullScreen?z.mozCancelFullScreen():z.webkitExitFullscreen&&z.webkitExitFullscreen())}),b.enableKeyboard&&D(z).on("keydown.ilb7",function(e){if(!g.length)return!0;-1<[27].indexOf(e.which)&&b.quitOnEscKey&&(e.stopPropagation(),e.preventDefault(),P()),-1<[37].indexOf(e.which)&&(e.stopPropagation(),e.preventDefault(),x()),-1<[39].indexOf(e.which)&&(e.stopPropagation(),e.preventDefault(),y())})}),D(z).off("click",b.selector),R(l),function(){if(J&&b.history){var e=v("imageLightboxIndex");if(e){var t=(c=l).filter('[data-ilb2-id="'+e+'"]');0<t.length?r=c.index(t):t=D(c[r=e]);var i=v("imageLightboxSet");!t[0]||i&&i!==t[0].dataset.imagelightbox||L(t,!0)}}}(),l.each(function(){var e=D(this).data("ilb2Video");if(e){var n={e:D("<video id='"+b.id+"' preload='metadata'>"),l:!1,a:void 0};D.each(e,function(e,t){"autoplay"===e?n.a=t:"sources"!==e&&(n.e=n.e.attr(e,t))}),e.sources&&D.each(e.sources,function(e,t){var i=D("<source>");D.each(t,function(e,t){i=i.attr(e,t)}),n.e.append(i)}),n.e.on("loadedmetadata.ilb7",function(){n.l=!0}),u=u.add(n)}}),this.addToImageLightbox=function(e){R(e)},this.loadPreviousImage=function(){x()},this.loadNextImage=function(){y()},this.quitImageLightbox=function(){return P(),this},this.startImageLightbox=function(e){e?e.trigger("click.ilb7"):D(this).trigger("click.ilb7")},this}});

docs/javascripts/imagelightbox.js

@@ -112,2 +112,3 @@ (function (factory) {
             target = $(),
+            videos = $([]),
             targetIndex = -1,
@@ -393,3 +394,3 @@ origTargets = $(this),
                 // eslint-disable-next-line
-                return $(element).prop('tagName').toLowerCase() === 'a' && (new RegExp('\.(' + options.allowedTypes + ')$', 'i')).test($(element).attr('href'));
+                return $(element).prop('tagName').toLowerCase() === 'a' && ((new RegExp('\.(' + options.allowedTypes + ')$', 'i')).test($(element).attr('href')) || $(element).data('ilb2Video'));
             },
@@ -405,10 +406,5 @@
                     screenHeight = $(window).height() - captionHeight,
-                    gutterFactor = Math.abs(1 - options.gutter/100),
-                    tmpImage = new Image();
+                    gutterFactor = Math.abs(1 - options.gutter/100);
 
-                tmpImage.src = image.attr('src');
-                tmpImage.onload = function () {
-                    imageWidth = tmpImage.width;
-                    imageHeight = tmpImage.height;
-
+                function setSizes () {
                     if (imageWidth > screenWidth || imageHeight > screenHeight) {
@@ -428,2 +424,17 @@ var ratio = imageWidth / imageHeight > screenWidth / screenHeight ? imageWidth / screenWidth : imageHeight / screenHeight;
                     });
+                }
+
+                if(image.get(0).videoWidth !== undefined) {
+                    imageWidth = image.get(0).videoWidth;
+                    imageHeight = image.get(0).videoHeight;
+                    setSizes();
+                    return;
+                }
+
+                var tmpImage = new Image();
+                tmpImage.src = image.attr('src');
+                tmpImage.onload = function() {
+                    imageWidth = tmpImage.width;
+                    imageHeight = tmpImage.height;
+                    setSizes();
                 };
@@ -464,34 +475,55 @@ },
 
-                    image = $('<img id=\'' + options.id + '\' />')
-                        .attr('src', imgPath)
-                        .on('load.ilb7', function () {
-                            var params = {'opacity': 1};
-
-                            image.appendTo($wrapper);
-                            _setImage();
-                            image.css('opacity', 0);
-                            if (hasCssTransitionSupport) {
-                                cssTransitionTranslateX(image, -100 * direction + 'px', 0);
-                                setTimeout(function () {
-                                    cssTransitionTranslateX(image, 0 + 'px', options.animationSpeed / 1000);
-                                }, 50);
-                            } else {
-                                var imagePosLeft = parseInt(image.css('left'));
-                                params.left = imagePosLeft + 'px';
-                                image.css('left', imagePosLeft - 100 * direction + 'px');
+                    var videoOptions = target.data('ilb2Video');
+                    var preloadedVideo, element;
+                    if (videoOptions) {
+                        videos.each(function() {
+                            if(this.e.attr('id') === options.id) {
+                                preloadedVideo = this.l;
+                                element = this.e;
+                                if(this.a) {
+                                    if(preloadedVideo === false) {
+                                        element.attr('autoplay', this.a);
+                                    }
+                                    if(preloadedVideo === true) {
+                                        element.get(0).play();
+                                    }
+                                }
                             }
+                        });
+                    } else {
+                        element = $('<img id=\'' + options.id + '\' />')
+                            .attr('src', imgPath);
+                    }
+                    function onload () {
+                        var params = {'opacity': 1};
 
-                            image.animate(params, options.animationSpeed, function () {
-                                inProgress = false;
-                                _onLoadEnd();
-                            });
-                            if (options.preloadNext) {
-                                var nextTarget = targets.eq(targets.index(target) + 1);
-                                if (!nextTarget.length) {
-                                    nextTarget = targets.eq(0);
-                                }
-                                $('<img />').attr('src', nextTarget.attr('href'));
+                        image.appendTo($wrapper);
+                        _setImage();
+                        image.css('opacity', 0);
+                        if (hasCssTransitionSupport) {
+                            cssTransitionTranslateX(image, -100 * direction + 'px', 0);
+                            setTimeout(function () {
+                                cssTransitionTranslateX(image, 0 + 'px', options.animationSpeed / 1000);
+                            }, 50);
+                        } else {
+                            var imagePosLeft = parseInt(image.css('left'));
+                            params.left = imagePosLeft + 'px';
+                            image.css('left', imagePosLeft - 100 * direction + 'px');
+                        }
+
+                        image.animate(params, options.animationSpeed, function () {
+                            inProgress = false;
+                            _onLoadEnd();
+                        });
+                        if (options.preloadNext) {
+                            var nextTarget = targets.eq(targets.index(target) + 1);
+                            if (!nextTarget.length) {
+                                nextTarget = targets.eq(0);
                             }
-                            $wrapper.trigger('loaded.ilb2');
-                        })
+                            $('<img />').attr('src', nextTarget.attr('href'));
+                        }
+                        $wrapper.trigger('loaded.ilb2');
+                    }
+                    image = element
+                        .on('load.ilb7', onload)
                         .on('error.ilb7', function () {
@@ -556,2 +588,8 @@ _onLoadEnd();
                         });
+                    if(preloadedVideo === true) {
+                        onload();
+                    }
+                    if(preloadedVideo === false) {
+                        image = image.on('loadedmetadata.ilb7', onload);
+                    }
 
@@ -627,2 +665,31 @@ }, options.animationSpeed + 100);
                 }
+            },
+
+            _preloadVideos = function () {
+                origTargets.each(function() {
+                    var videoOptions = $(this).data('ilb2Video');
+                    if (videoOptions) {
+                        var container = {e: $('<video id=\'' + options.id + '\' preload=\'metadata\'>'), l: false, a: undefined}; // e = element, l = is metadata loaded, a = autoplay
+                        $.each(videoOptions, function(key, value) {
+                            if(key === 'autoplay') {
+                                container.a = value;
+                            } else if(key !== 'sources') {
+                                container.e = container.e.attr(key, value);
+                            }
+                        });
+                        if(videoOptions.sources) {
+                            $.each(videoOptions.sources, function (_, source) {
+                                var sourceElement = $('<source>');
+                                $.each(source, function(key, value) {
+                                    sourceElement = sourceElement.attr(key, value);
+                                });
+                                container.e.append(sourceElement);
+                            });
+                        }
+                        container.e.on('loadedmetadata.ilb7', function() {
+                            container.l = true;
+                        });
+                        videos = videos.add(container);
+                    }
+                });
             };
@@ -722,2 +789,4 @@
 
+        _preloadVideos();
+
         this.addToImageLightbox = function (elements)  {
@@ -724,0 +793,0 @@ _addTargets(elements);

docs/javascripts/main.js

@@ -84,2 +84,8 @@ $(document).ready(function() {
 
+    $('a[data-imagelightbox="video"]').imageLightbox({
+        activity: true,
+        arrows: true,
+        overlay: true
+    });
+
     /**
@@ -86,0 +92,0 @@ *

gulpfile.js

@@ -0,0 +0,0 @@ var gulp            = require('gulp'),

nightwatch.json

@@ -0,0 +0,0 @@ {

package.json

 {
   "name": "imagelightbox",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Image Lightbox, Responsive and Touch‑friendly",
@@ -15,11 +15,11 @@ "homepage": "https://rejas.github.io/imagelightbox",
     "gulp": "^4.0.0",
-    "gulp-autoprefixer": "^5.0.0",
-    "gulp-clean-css": "^3.9.4",
-    "gulp-connect": "^5.5.0",
+    "gulp-autoprefixer": "^6.0.0",
+    "gulp-clean-css": "^3.10.0",
+    "gulp-connect": "^5.6.1",
     "gulp-csslint": "^1.0.1",
-    "gulp-eslint": "^4.0.2",
+    "gulp-eslint": "^5.0.0",
     "gulp-lintspaces": "^1.0.0",
-    "gulp-nightwatch": "^0.3.3",
-    "gulp-rename": "^1.3.0",
-    "gulp-uglify": "^3.0.0"
+    "gulp-nightwatch": "^1.0.1",
+    "gulp-rename": "^1.4.0",
+    "gulp-uglify": "^3.0.1"
   },
@@ -26,0 +26,0 @@ "keywords": [

README.md

@@ -110,2 +110,12 @@ imagelightbox
 
+## Video
+
+Video can be displayed in imagelightbox, by including a `data-ilb2-video` attribute in the link. This attribute should contain a JSON-encoded list of parameters as they would be in an HTML5 video tag. For multiple video sources, the `sources` field can be added, containing a list of similarily encoded HTML5 source tags.
+
+````html
+    <a data-ilb2-video='{"controls":"controls", "autoplay":"autoplay", "sources":[{"src":"images/video.m4v", "type":"video/mp4"}]}' data-imagelightbox="x">
+	    <img src="images/video-thumb.jpg">
+    </a>
+````
+
 ## Hooks
@@ -112,0 +122,0 @@

src/imagelightbox.js

@@ -112,2 +112,3 @@ (function (factory) {
             target = $(),
+            videos = $([]),
             targetIndex = -1,
@@ -393,3 +394,3 @@ origTargets = $(this),
                 // eslint-disable-next-line
-                return $(element).prop('tagName').toLowerCase() === 'a' && (new RegExp('\.(' + options.allowedTypes + ')$', 'i')).test($(element).attr('href'));
+                return $(element).prop('tagName').toLowerCase() === 'a' && ((new RegExp('\.(' + options.allowedTypes + ')$', 'i')).test($(element).attr('href')) || $(element).data('ilb2Video'));
             },
@@ -405,10 +406,5 @@
                     screenHeight = $(window).height() - captionHeight,
-                    gutterFactor = Math.abs(1 - options.gutter/100),
-                    tmpImage = new Image();
+                    gutterFactor = Math.abs(1 - options.gutter/100);
 
-                tmpImage.src = image.attr('src');
-                tmpImage.onload = function () {
-                    imageWidth = tmpImage.width;
-                    imageHeight = tmpImage.height;
-
+                function setSizes () {
                     if (imageWidth > screenWidth || imageHeight > screenHeight) {
@@ -428,2 +424,17 @@ var ratio = imageWidth / imageHeight > screenWidth / screenHeight ? imageWidth / screenWidth : imageHeight / screenHeight;
                     });
+                }
+
+                if(image.get(0).videoWidth !== undefined) {
+                    imageWidth = image.get(0).videoWidth;
+                    imageHeight = image.get(0).videoHeight;
+                    setSizes();
+                    return;
+                }
+
+                var tmpImage = new Image();
+                tmpImage.src = image.attr('src');
+                tmpImage.onload = function() {
+                    imageWidth = tmpImage.width;
+                    imageHeight = tmpImage.height;
+                    setSizes();
                 };
@@ -464,34 +475,55 @@ },
 
-                    image = $('<img id=\'' + options.id + '\' />')
-                        .attr('src', imgPath)
-                        .on('load.ilb7', function () {
-                            var params = {'opacity': 1};
-
-                            image.appendTo($wrapper);
-                            _setImage();
-                            image.css('opacity', 0);
-                            if (hasCssTransitionSupport) {
-                                cssTransitionTranslateX(image, -100 * direction + 'px', 0);
-                                setTimeout(function () {
-                                    cssTransitionTranslateX(image, 0 + 'px', options.animationSpeed / 1000);
-                                }, 50);
-                            } else {
-                                var imagePosLeft = parseInt(image.css('left'));
-                                params.left = imagePosLeft + 'px';
-                                image.css('left', imagePosLeft - 100 * direction + 'px');
+                    var videoOptions = target.data('ilb2Video');
+                    var preloadedVideo, element;
+                    if (videoOptions) {
+                        videos.each(function() {
+                            if(this.e.attr('id') === options.id) {
+                                preloadedVideo = this.l;
+                                element = this.e;
+                                if(this.a) {
+                                    if(preloadedVideo === false) {
+                                        element.attr('autoplay', this.a);
+                                    }
+                                    if(preloadedVideo === true) {
+                                        element.get(0).play();
+                                    }
+                                }
                             }
+                        });
+                    } else {
+                        element = $('<img id=\'' + options.id + '\' />')
+                            .attr('src', imgPath);
+                    }
+                    function onload () {
+                        var params = {'opacity': 1};
 
-                            image.animate(params, options.animationSpeed, function () {
-                                inProgress = false;
-                                _onLoadEnd();
-                            });
-                            if (options.preloadNext) {
-                                var nextTarget = targets.eq(targets.index(target) + 1);
-                                if (!nextTarget.length) {
-                                    nextTarget = targets.eq(0);
-                                }
-                                $('<img />').attr('src', nextTarget.attr('href'));
+                        image.appendTo($wrapper);
+                        _setImage();
+                        image.css('opacity', 0);
+                        if (hasCssTransitionSupport) {
+                            cssTransitionTranslateX(image, -100 * direction + 'px', 0);
+                            setTimeout(function () {
+                                cssTransitionTranslateX(image, 0 + 'px', options.animationSpeed / 1000);
+                            }, 50);
+                        } else {
+                            var imagePosLeft = parseInt(image.css('left'));
+                            params.left = imagePosLeft + 'px';
+                            image.css('left', imagePosLeft - 100 * direction + 'px');
+                        }
+
+                        image.animate(params, options.animationSpeed, function () {
+                            inProgress = false;
+                            _onLoadEnd();
+                        });
+                        if (options.preloadNext) {
+                            var nextTarget = targets.eq(targets.index(target) + 1);
+                            if (!nextTarget.length) {
+                                nextTarget = targets.eq(0);
                             }
-                            $wrapper.trigger('loaded.ilb2');
-                        })
+                            $('<img />').attr('src', nextTarget.attr('href'));
+                        }
+                        $wrapper.trigger('loaded.ilb2');
+                    }
+                    image = element
+                        .on('load.ilb7', onload)
                         .on('error.ilb7', function () {
@@ -556,2 +588,8 @@ _onLoadEnd();
                         });
+                    if(preloadedVideo === true) {
+                        onload();
+                    }
+                    if(preloadedVideo === false) {
+                        image = image.on('loadedmetadata.ilb7', onload);
+                    }
 
@@ -627,2 +665,31 @@ }, options.animationSpeed + 100);
                 }
+            },
+
+            _preloadVideos = function () {
+                origTargets.each(function() {
+                    var videoOptions = $(this).data('ilb2Video');
+                    if (videoOptions) {
+                        var container = {e: $('<video id=\'' + options.id + '\' preload=\'metadata\'>'), l: false, a: undefined}; // e = element, l = is metadata loaded, a = autoplay
+                        $.each(videoOptions, function(key, value) {
+                            if(key === 'autoplay') {
+                                container.a = value;
+                            } else if(key !== 'sources') {
+                                container.e = container.e.attr(key, value);
+                            }
+                        });
+                        if(videoOptions.sources) {
+                            $.each(videoOptions.sources, function (_, source) {
+                                var sourceElement = $('<source>');
+                                $.each(source, function(key, value) {
+                                    sourceElement = sourceElement.attr(key, value);
+                                });
+                                container.e.append(sourceElement);
+                            });
+                        }
+                        container.e.on('loadedmetadata.ilb7', function() {
+                            container.l = true;
+                        });
+                        videos = videos.add(container);
+                    }
+                });
             };
@@ -722,2 +789,4 @@
 
+        _preloadVideos();
+
         this.addToImageLightbox = function (elements)  {
@@ -724,0 +793,0 @@ _addTargets(elements);

test/src/ilb2.js

@@ -0,0 +0,0 @@ function openDemo (browser, hash) {

No alert changes

Improved metrics

Total package byte prevSize

49682741

increased by6.73%

Number of package files

54

increased by12.5%

Lines of code

3475

increased by4.1%

Number of lines in readme file

250

increased by4.17%

No dependency changes