imagelightbox - npm Package Compare versions

Comparing version 0.9.1 to 0.10.0

.eslintrc.json

@@ -19,2 +19,5 @@ {
         ],
+        "no-console": [
+            "warn"
+        ],
         "quotes": [
@@ -21,0 +24,0 @@ "error",

CHANGELOG.md

@@ -8,2 +8,14 @@ # Changelog
 
+## [Unreleased]
+
+## [0.10.0] - 2018-06-29
+
+### Added
+
+- Added history functionality (@genabitu & @paxperscientiam)
+
+### Changed
+
+- Switched back to package-lock.json
+
 ## [0.9.1] - 2018-05-17
@@ -24,3 +36,3 @@
 - Added jquery as dependency in package.json
-- Removed bower.json (use npm) and package-lock.json (use yarn) 
+- Removed bower.json (use npm) and package-lock.json (use yarn)
 - Updated to gulp4 for building
@@ -163,3 +175,4 @@
 
-[Unreleased]: https://github.com/rejas/imagelightbox/compare/0.9.1...HEAD
+[Unreleased]: https://github.com/rejas/imagelightbox/compare/0.10.0...HEAD
+[0.10.0]: https://github.com/rejas/imagelightbox/compare/0.9.1...0.10.0
 [0.9.1]: https://github.com/rejas/imagelightbox/compare/0.9.0...0.9.1
@@ -166,0 +179,0 @@ [0.9.0]: https://github.com/rejas/imagelightbox/compare/0.8.1...0.9.0

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

docs/javascripts/imagelightbox.js

@@ -76,3 +76,3 @@ (function (factory) {
 
-        hasTouch = ( 'ontouchstart' in window ),
+        hasTouch = ('ontouchstart' in window),
         hasPointers = window.navigator.pointerEnabled || window.navigator.msPointerEnabled,
@@ -102,11 +102,22 @@ wasTouched = function (event) {
             return !!(document.fullscreenEnabled ||
-                    document.webkitFullscreenEnabled ||
-                    document.mozFullScreenEnabled ||
-                    document.msFullscreenEnabled);
-
+                document.webkitFullscreenEnabled ||
+                document.mozFullScreenEnabled ||
+                document.msFullscreenEnabled);
         },
-        hasFullscreenSupport = fullscreenSupport() !== false;
+        hasFullscreenSupport = fullscreenSupport() !== false,
+        hasHistorySupport = !!(window.history && history.pushState);
 
     $.fn.imageLightbox = function (opts) {
-        var options = $.extend({
+        var targetSet = '',
+            targets = $([]),
+            target = $(),
+            targetIndex = -1,
+            origTargets = $(this),
+            image = $(),
+            imageWidth = 0,
+            imageHeight = 0,
+            swipeDiff = 0,
+            inProgress = false,
+            currentIndex = 0,
+            options = $.extend({
                 selector:       'a[data-imagelightbox]',
@@ -121,2 +132,3 @@ id:             'imagelightbox',
                 enableKeyboard: true,
+                history:        false,
                 fullscreen:     false,
@@ -133,2 +145,3 @@ gutter:         10,     // percentage of client height
             }, opts),
+
             _onStart = function () {
@@ -167,4 +180,118 @@ if (options.arrows) {
             },
+            _addQueryField = function (query, key, value) {
+                var newField = key + '=' + value;
+                var newQuery = '?' + newField;
+
+                if (query) {
+                    var keyRegex = new RegExp('([?&])' + key + '=[^&]*');
+                    if (query.match(keyRegex) !== null) {
+                        newQuery = query.replace(keyRegex, '$1' + newField);
+                    } else {
+                        newQuery = query + '&' + newField;
+                    }
+                }
+                return newQuery;
+            },
+            _pushToHistory = function () {
+                if(!hasHistorySupport || !options.history) {
+                    return;
+                }
+                var newIndex = targets[targetIndex].dataset.ilb2Id;
+                if(!newIndex) {
+                    newIndex = targetIndex;
+                }
+                var newState = {imageLightboxIndex: newIndex};
+                var set = targets[targetIndex].dataset.imagelightbox;
+                if(set) {
+                    newState.imageLightboxSet = set;
+                }
+                var newQuery = _addQueryField(document.location.search, 'imageLightboxIndex', newIndex);
+                if(set) {
+                    newQuery = _addQueryField(newQuery, 'imageLightboxSet', set);
+                }
+                window.history.pushState(newState, '', newQuery);
+            },
+            _removeQueryField = function(query, key) {
+                var newQuery = query;
+                if (newQuery) {
+                    var keyRegex1 = new RegExp('[?]' + key + '=[^&]*');
+                    var keyRegex2 = new RegExp('&' + key + '=[^&]*');
+                    newQuery = newQuery.replace(keyRegex1, '?');
+                    newQuery = newQuery.replace(keyRegex2, '');
+                }
+                return newQuery;
+            },
+            _pushQuitToHistory = function () {
+                if(!hasHistorySupport || !options.history) {
+                    return;
+                }
+                var newQuery = _removeQueryField(document.location.search, 'imageLightboxIndex');
+                newQuery = _removeQueryField(newQuery, 'imageLightboxSet');
+                window.history.pushState({}, '', newQuery);
+            },
+            _getQueryField = function(key) {
+                var keyValuePair = new RegExp('[?&]' + key + '(=([^&#]*)|&|#|$)').exec(document.location.search);
+                if(!keyValuePair || !keyValuePair[2]) {
+                    return undefined;
+                }
+                return decodeURIComponent(keyValuePair[2].replace(/\+/g, ' '));
+            },
+            _openHistory = function () {
+                if(!hasHistorySupport || !options.history) {
+                    return;
+                }
+                var id = _getQueryField('imageLightboxIndex');
+                if(!id) {
+                    return;
+                }
+                targets = origTargets;
+                var element = targets.filter('[data-ilb2-id="' + id + '"]');
+                if(element.length > 0) {
+                    targetIndex = targets.index(element);
+                } else {
+                    targetIndex = id;
+                    element = $(targets[targetIndex]);
+                }
+                var set = _getQueryField('imageLightboxSet');
+                if(!element[0] || (!!set && set !== element[0].dataset.imagelightbox)) {
+                    return;
+                }
+                _openImageLightbox(element, true);
+            },
+            _popHistory = function (event) {
+                var newState = event.originalEvent.state;
+                if(!newState) {
+                    _quitImageLightbox(true);
+                    return;
+                }
+                var newId = newState.imageLightboxIndex;
+                if(newId === undefined) {
+                    _quitImageLightbox(true);
+                    return;
+                }
+                var element = origTargets.filter('[data-ilb2-id="' + newId + '"]');
+                if(element.length > 0) {
+                    var newIndex = origTargets.index(element);
+                } else {
+                    newIndex = newId;
+                    element = $(origTargets[newIndex]);
+                }
+                if(!element[0] || (newState.imageLightboxSet && newState.imageLightboxSet !== element[0].dataset.imagelightbox)) {
+                    return;
+                }
+                if(targetIndex < 0) {
+                    targets = origTargets;
+                    _openImageLightbox(element, true);
+                    return;
+                }
+                var direction = +1;
+                if(newIndex > targetIndex) {
+                    direction = -1;
+                }
+                target = element;
+                targetIndex = newIndex;
+                _loadImage(direction);
+            },
             _previousTarget = function () {
-                var targetIndex = targets.index(target) - 1;
+                targetIndex--;
                 if (targetIndex < 0) {
@@ -180,2 +307,3 @@ if (options.quitOnEnd === true) {
                 target = targets.eq(targetIndex);
+                _pushToHistory();
                 $wrapper.trigger('previous.ilb2');
@@ -185,3 +313,3 @@ _loadImage(+1);
             _nextTarget = function () {
-                var targetIndex = targets.index(target) + 1;
+                targetIndex++;
                 if (targetIndex >= targets.length) {
@@ -196,2 +324,3 @@ if (options.quitOnEnd === true) {
                 }
+                _pushToHistory();
                 target = targets.eq(targetIndex);
@@ -268,15 +397,6 @@ $wrapper.trigger('next.ilb2');
             },
-            targetSet = '',
-            targets = $([]),
-            target = $(),
-            image = $(),
-            imageWidth = 0,
-            imageHeight = 0,
-            swipeDiff = 0,
-            inProgress = false,
-            currentIndex = 0,
 
             isTargetValid = function (element) {
                 // 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'));
             },
@@ -288,5 +408,5 @@
                 }
-                var captionHeight = options.caption ? $captionObject.outerHeight() : 0;
 
-                var screenWidth = $(window).width(),
+                var captionHeight = options.caption ? $captionObject.outerHeight() : 0,
+                    screenWidth = $(window).width(),
                     screenHeight = $(window).height() - captionHeight,
@@ -326,6 +446,6 @@ gutterFactor = Math.abs(1 - options.gutter/100),
                     if (hasCssTransitionSupport) {
-                        cssTransitionTranslateX(image, ( 100 * direction ) - swipeDiff + 'px', options.animationSpeed / 1000);
+                        cssTransitionTranslateX(image, (100 * direction) - swipeDiff + 'px', options.animationSpeed / 1000);
                     }
                     else {
-                        params.left = parseInt(image.css('left')) + 100 * direction + 'px';
+                        params.left = parseInt(image.css('left')) + (100 * direction) + 'px';
                     }
@@ -342,6 +462,11 @@ image.animate(params, options.animationSpeed, function () {
                 setTimeout(function () {
-                    var imgPath = target.attr('href');
-                    // if ( imgPath === undefined ) {
-                    //     imgPath = target.attr( 'data-lightbox' );
+                    var imgPath = target.attr('href'),
+                        swipeStart = 0,
+                        swipeEnd = 0,
+                        imagePosLeft = 0;
+
+                    // if (imgPath === undefined) {
+                    //     imgPath = target.attr('data-lightbox');
                     // }
+
                     image = $('<img id=\'' + options.id + '\' />')
@@ -381,24 +506,19 @@ .attr('src', imgPath)
                             _onLoadEnd();
-                        });
-
-                    var swipeStart = 0,
-                        swipeEnd = 0,
-                        imagePosLeft = 0;
-
-                    image.on(hasPointers ? 'pointerup.ilb7 MSPointerUp.ilb7' : 'click.ilb7', function (e) {
-                        e.preventDefault();
-                        if (options.quitOnImgClick) {
-                            _quitImageLightbox();
-                            return false;
-                        }
-                        if (wasTouched(e.originalEvent)) {
-                            return true;
-                        }
-                        var posX = ( e.pageX || e.originalEvent.pageX ) - e.target.offsetLeft;
-                        if (imageWidth / 2 > posX) {
-                            _previousTarget();
-                        } else {
-                            _nextTarget();
-                        }
-                    })
+                        })
+                        .on(hasPointers ? 'pointerup.ilb7 MSPointerUp.ilb7' : 'click.ilb7', function (e) {
+                            e.preventDefault();
+                            if (options.quitOnImgClick) {
+                                _quitImageLightbox();
+                                return false;
+                            }
+                            if (wasTouched(e.originalEvent)) {
+                                return true;
+                            }
+                            var posX = (e.pageX || e.originalEvent.pageX) - e.target.offsetLeft;
+                            if (imageWidth / 2 > posX) {
+                                _previousTarget();
+                            } else {
+                                _nextTarget();
+                            }
+                        })
                         .on('touchstart.ilb7 pointerdown.ilb7 MSPointerDown.ilb7', function (e) {
@@ -447,2 +567,3 @@ if (!wasTouched(e.originalEvent) || options.quitOnImgClick) {
             },
+
             _removeImage = function () {
@@ -456,3 +577,3 @@ if (!image.length) {
 
-            _openImageLightbox = function ($target) {
+            _openImageLightbox = function ($target, noHistory) {
                 if (inProgress) {
@@ -463,2 +584,6 @@ return false;
                 target = $target;
+                targetIndex = targets.index(target);
+                if(!noHistory) {
+                    _pushToHistory();
+                }
                 _onStart();
@@ -471,3 +596,7 @@ $body.append($wrapper)
 
-            _quitImageLightbox = function () {
+            _quitImageLightbox = function (noHistory) {
+                targetIndex = -1;
+                if(!noHistory) {
+                    _pushQuitToHistory();
+                }
                 $wrapper.trigger('quit.ilb2');
@@ -486,3 +615,3 @@ $body.removeClass('imagelightbox-open');
 
-            _addTargets = function( newTargets ) {
+            _addTargets = function (newTargets) {
                 newTargets.on('click.ilb7', {set: targetSet}, function (e) {
@@ -513,2 +642,5 @@ e.preventDefault();
         $(window).on('resize.ilb7', _setImage);
+        if(hasHistorySupport && options.history) {
+            $(window).on('popstate', _popHistory);
+        }
 
@@ -593,3 +725,3 @@ $(document).ready(function() {
             launchIntoFullscreen(document.getElementById(options.id).parentElement) ||
-                exitFullscreen();
+            exitFullscreen();
         }
@@ -599,5 +731,7 @@
 
-        _addTargets($(this));
+        _addTargets(origTargets);
 
-        this.addToImageLightbox = function(elements)  {
+        _openHistory();
+
+        this.addToImageLightbox = function (elements)  {
             _addTargets(elements);
@@ -604,0 +738,0 @@ };

docs/javascripts/main.js

@@ -76,14 +76,10 @@ $(document).ready(function() {
 
-    /**
-     * Usage: http://example.org/galleries/123#showImage_1
-     */
-    $('a[data-imagelightbox="k"]').imageLightbox();
-    var hashData = $(location).attr('hash').substring(1).split('_');
-    if (hashData.length > 0 && hashData[0] === 'showImage') {
-        // start imagelightbox with this image
-        var image = $('a[data-imagelightbox="k"][data-ilb2-id="' + hashData[1] + '"]');
-        var lightboxInstance = $('a[data-imagelightbox="k"]').imageLightbox();
-        lightboxInstance.startImageLightbox(image);
-    }
+    $('a[data-imagelightbox="j"]').imageLightbox({
+        history: true
+    });
 
+    $('a[data-imagelightbox="k"]').imageLightbox({
+        history: true
+    });
+
     /**
@@ -90,0 +86,0 @@ *

gulpfile.js

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

nightwatch.json

@@ -7,3 +7,3 @@ {
         "start_process" : true,
-        "server_path" : "./test/resources/selenium-server-standalone-3.6.0.jar",
+        "server_path" : "./test/resources/selenium-server-standalone-3.13.0.jar",
         "log_path" : false,
@@ -10,0 +10,0 @@ "port" : 4444,

package.json

 {
   "name": "imagelightbox",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Image Lightbox, Responsive and Touch‑friendly",
@@ -22,3 +22,3 @@ "homepage": "https://rejas.github.io/imagelightbox",
     "gulp-nightwatch": "^0.3.3",
-    "gulp-rename": "^1.2.3",
+    "gulp-rename": "^1.3.0",
     "gulp-uglify": "^3.0.0"
@@ -25,0 +25,0 @@ },

README.md

@@ -48,2 +48,3 @@ imagelightbox
     enableKeyboard: true,                    // bool;            enable keyboard shortcuts (arrows Left/Right and Esc)
+    history:        false,                   // bool;            enable image permalinks and history
     fullscreen:     false                    // bool;            enable fullscreen (enter/return key)
@@ -206,26 +207,27 @@ gutter:         10,                      // integer;         window height less height of image as a percentage
 
-## Deep linking
+## Permalinks & History
 
-Open imageLightBox with a specific image
+When history is enabled, upon clicking on an image, the query field `imageLightboxIndex=X` is added to the URL, where `X` is the index of the currently opened image. This means that such an URL can be copied and used as a permanent link to that particular image. When somebody opens the URL, the lightbox will be open on the image in question. This also works with multiple sets, where an aditional query field `imageLightboxSet=Y` is used to distinguish between the sets in one page.
 
+In some cases, this could lead to a different image being opened, for example if new images have been added to the set, or if the order of the images has changed. To solve this issue, whenever the HTML attribute `data-ilb2-id=X` is present in the image tag, this value is used instead of the image index (this means this id has to be different for each image and mustn't change over time).
+
 ###### Example:
 
-````javascript
+```javascript
 <script src="jquery.js"></script>
 <script src="imagelightbox.js"></script>
+
+<a href="image1.jpg" data-imagelightbox="images" data-ilb2-id="img1"><img src="thumb1.jpg"></a>
+<a href="image2.jpg" data-imagelightbox="images" data-ilb2-id="img2"><img src="thumb2.jpg"></a>
+<a href="image3.jpg" data-imagelightbox="images" data-ilb2-id="img3"><img src="thumb3.jpg"></a>
+
 <script>
     $( function()
     {
-        // location: http://example.org/galleries/123#showImage_1
-        var hashData = $(location).attr('hash').substring(1).split('_');
-        if (hashData.length > 0 && hashData[0] === 'showImage')
-        {
-            // start imagelightbox with this image
-            var image = $('selector[data-ilb2-id="' + hashData[1] + '"]');
-            var lightboxInstance = $( selector ).imageLightbox();
-            lightboxInstance.startImageLightbox(image);
-        }
+        $('a[data-imagelightbox="images"]').imageLightbox({
+            history: true
+        });
     });
 </script>
-````
+```
 
@@ -235,1 +237,6 @@ ## Changelog
 You can find all notable changes to this project in the [CHANGELOG.md](CHANGELOG.md).
+
+
+## See also
+
+Used by https://wordpress.org/plugins/skaut-google-drive-gallery/

src/imagelightbox.js

@@ -76,3 +76,3 @@ (function (factory) {
 
-        hasTouch = ( 'ontouchstart' in window ),
+        hasTouch = ('ontouchstart' in window),
         hasPointers = window.navigator.pointerEnabled || window.navigator.msPointerEnabled,
@@ -102,11 +102,22 @@ wasTouched = function (event) {
             return !!(document.fullscreenEnabled ||
-                    document.webkitFullscreenEnabled ||
-                    document.mozFullScreenEnabled ||
-                    document.msFullscreenEnabled);
-
+                document.webkitFullscreenEnabled ||
+                document.mozFullScreenEnabled ||
+                document.msFullscreenEnabled);
         },
-        hasFullscreenSupport = fullscreenSupport() !== false;
+        hasFullscreenSupport = fullscreenSupport() !== false,
+        hasHistorySupport = !!(window.history && history.pushState);
 
     $.fn.imageLightbox = function (opts) {
-        var options = $.extend({
+        var targetSet = '',
+            targets = $([]),
+            target = $(),
+            targetIndex = -1,
+            origTargets = $(this),
+            image = $(),
+            imageWidth = 0,
+            imageHeight = 0,
+            swipeDiff = 0,
+            inProgress = false,
+            currentIndex = 0,
+            options = $.extend({
                 selector:       'a[data-imagelightbox]',
@@ -121,2 +132,3 @@ id:             'imagelightbox',
                 enableKeyboard: true,
+                history:        false,
                 fullscreen:     false,
@@ -133,2 +145,3 @@ gutter:         10,     // percentage of client height
             }, opts),
+
             _onStart = function () {
@@ -167,4 +180,118 @@ if (options.arrows) {
             },
+            _addQueryField = function (query, key, value) {
+                var newField = key + '=' + value;
+                var newQuery = '?' + newField;
+
+                if (query) {
+                    var keyRegex = new RegExp('([?&])' + key + '=[^&]*');
+                    if (query.match(keyRegex) !== null) {
+                        newQuery = query.replace(keyRegex, '$1' + newField);
+                    } else {
+                        newQuery = query + '&' + newField;
+                    }
+                }
+                return newQuery;
+            },
+            _pushToHistory = function () {
+                if(!hasHistorySupport || !options.history) {
+                    return;
+                }
+                var newIndex = targets[targetIndex].dataset.ilb2Id;
+                if(!newIndex) {
+                    newIndex = targetIndex;
+                }
+                var newState = {imageLightboxIndex: newIndex};
+                var set = targets[targetIndex].dataset.imagelightbox;
+                if(set) {
+                    newState.imageLightboxSet = set;
+                }
+                var newQuery = _addQueryField(document.location.search, 'imageLightboxIndex', newIndex);
+                if(set) {
+                    newQuery = _addQueryField(newQuery, 'imageLightboxSet', set);
+                }
+                window.history.pushState(newState, '', newQuery);
+            },
+            _removeQueryField = function(query, key) {
+                var newQuery = query;
+                if (newQuery) {
+                    var keyRegex1 = new RegExp('[?]' + key + '=[^&]*');
+                    var keyRegex2 = new RegExp('&' + key + '=[^&]*');
+                    newQuery = newQuery.replace(keyRegex1, '?');
+                    newQuery = newQuery.replace(keyRegex2, '');
+                }
+                return newQuery;
+            },
+            _pushQuitToHistory = function () {
+                if(!hasHistorySupport || !options.history) {
+                    return;
+                }
+                var newQuery = _removeQueryField(document.location.search, 'imageLightboxIndex');
+                newQuery = _removeQueryField(newQuery, 'imageLightboxSet');
+                window.history.pushState({}, '', newQuery);
+            },
+            _getQueryField = function(key) {
+                var keyValuePair = new RegExp('[?&]' + key + '(=([^&#]*)|&|#|$)').exec(document.location.search);
+                if(!keyValuePair || !keyValuePair[2]) {
+                    return undefined;
+                }
+                return decodeURIComponent(keyValuePair[2].replace(/\+/g, ' '));
+            },
+            _openHistory = function () {
+                if(!hasHistorySupport || !options.history) {
+                    return;
+                }
+                var id = _getQueryField('imageLightboxIndex');
+                if(!id) {
+                    return;
+                }
+                targets = origTargets;
+                var element = targets.filter('[data-ilb2-id="' + id + '"]');
+                if(element.length > 0) {
+                    targetIndex = targets.index(element);
+                } else {
+                    targetIndex = id;
+                    element = $(targets[targetIndex]);
+                }
+                var set = _getQueryField('imageLightboxSet');
+                if(!element[0] || (!!set && set !== element[0].dataset.imagelightbox)) {
+                    return;
+                }
+                _openImageLightbox(element, true);
+            },
+            _popHistory = function (event) {
+                var newState = event.originalEvent.state;
+                if(!newState) {
+                    _quitImageLightbox(true);
+                    return;
+                }
+                var newId = newState.imageLightboxIndex;
+                if(newId === undefined) {
+                    _quitImageLightbox(true);
+                    return;
+                }
+                var element = origTargets.filter('[data-ilb2-id="' + newId + '"]');
+                if(element.length > 0) {
+                    var newIndex = origTargets.index(element);
+                } else {
+                    newIndex = newId;
+                    element = $(origTargets[newIndex]);
+                }
+                if(!element[0] || (newState.imageLightboxSet && newState.imageLightboxSet !== element[0].dataset.imagelightbox)) {
+                    return;
+                }
+                if(targetIndex < 0) {
+                    targets = origTargets;
+                    _openImageLightbox(element, true);
+                    return;
+                }
+                var direction = +1;
+                if(newIndex > targetIndex) {
+                    direction = -1;
+                }
+                target = element;
+                targetIndex = newIndex;
+                _loadImage(direction);
+            },
             _previousTarget = function () {
-                var targetIndex = targets.index(target) - 1;
+                targetIndex--;
                 if (targetIndex < 0) {
@@ -180,2 +307,3 @@ if (options.quitOnEnd === true) {
                 target = targets.eq(targetIndex);
+                _pushToHistory();
                 $wrapper.trigger('previous.ilb2');
@@ -185,3 +313,3 @@ _loadImage(+1);
             _nextTarget = function () {
-                var targetIndex = targets.index(target) + 1;
+                targetIndex++;
                 if (targetIndex >= targets.length) {
@@ -196,2 +324,3 @@ if (options.quitOnEnd === true) {
                 }
+                _pushToHistory();
                 target = targets.eq(targetIndex);
@@ -268,15 +397,6 @@ $wrapper.trigger('next.ilb2');
             },
-            targetSet = '',
-            targets = $([]),
-            target = $(),
-            image = $(),
-            imageWidth = 0,
-            imageHeight = 0,
-            swipeDiff = 0,
-            inProgress = false,
-            currentIndex = 0,
 
             isTargetValid = function (element) {
                 // 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'));
             },
@@ -288,5 +408,5 @@
                 }
-                var captionHeight = options.caption ? $captionObject.outerHeight() : 0;
 
-                var screenWidth = $(window).width(),
+                var captionHeight = options.caption ? $captionObject.outerHeight() : 0,
+                    screenWidth = $(window).width(),
                     screenHeight = $(window).height() - captionHeight,
@@ -326,6 +446,6 @@ gutterFactor = Math.abs(1 - options.gutter/100),
                     if (hasCssTransitionSupport) {
-                        cssTransitionTranslateX(image, ( 100 * direction ) - swipeDiff + 'px', options.animationSpeed / 1000);
+                        cssTransitionTranslateX(image, (100 * direction) - swipeDiff + 'px', options.animationSpeed / 1000);
                     }
                     else {
-                        params.left = parseInt(image.css('left')) + 100 * direction + 'px';
+                        params.left = parseInt(image.css('left')) + (100 * direction) + 'px';
                     }
@@ -342,6 +462,11 @@ image.animate(params, options.animationSpeed, function () {
                 setTimeout(function () {
-                    var imgPath = target.attr('href');
-                    // if ( imgPath === undefined ) {
-                    //     imgPath = target.attr( 'data-lightbox' );
+                    var imgPath = target.attr('href'),
+                        swipeStart = 0,
+                        swipeEnd = 0,
+                        imagePosLeft = 0;
+
+                    // if (imgPath === undefined) {
+                    //     imgPath = target.attr('data-lightbox');
                     // }
+
                     image = $('<img id=\'' + options.id + '\' />')
@@ -381,24 +506,19 @@ .attr('src', imgPath)
                             _onLoadEnd();
-                        });
-
-                    var swipeStart = 0,
-                        swipeEnd = 0,
-                        imagePosLeft = 0;
-
-                    image.on(hasPointers ? 'pointerup.ilb7 MSPointerUp.ilb7' : 'click.ilb7', function (e) {
-                        e.preventDefault();
-                        if (options.quitOnImgClick) {
-                            _quitImageLightbox();
-                            return false;
-                        }
-                        if (wasTouched(e.originalEvent)) {
-                            return true;
-                        }
-                        var posX = ( e.pageX || e.originalEvent.pageX ) - e.target.offsetLeft;
-                        if (imageWidth / 2 > posX) {
-                            _previousTarget();
-                        } else {
-                            _nextTarget();
-                        }
-                    })
+                        })
+                        .on(hasPointers ? 'pointerup.ilb7 MSPointerUp.ilb7' : 'click.ilb7', function (e) {
+                            e.preventDefault();
+                            if (options.quitOnImgClick) {
+                                _quitImageLightbox();
+                                return false;
+                            }
+                            if (wasTouched(e.originalEvent)) {
+                                return true;
+                            }
+                            var posX = (e.pageX || e.originalEvent.pageX) - e.target.offsetLeft;
+                            if (imageWidth / 2 > posX) {
+                                _previousTarget();
+                            } else {
+                                _nextTarget();
+                            }
+                        })
                         .on('touchstart.ilb7 pointerdown.ilb7 MSPointerDown.ilb7', function (e) {
@@ -447,2 +567,3 @@ if (!wasTouched(e.originalEvent) || options.quitOnImgClick) {
             },
+
             _removeImage = function () {
@@ -456,3 +577,3 @@ if (!image.length) {
 
-            _openImageLightbox = function ($target) {
+            _openImageLightbox = function ($target, noHistory) {
                 if (inProgress) {
@@ -463,2 +584,6 @@ return false;
                 target = $target;
+                targetIndex = targets.index(target);
+                if(!noHistory) {
+                    _pushToHistory();
+                }
                 _onStart();
@@ -471,3 +596,7 @@ $body.append($wrapper)
 
-            _quitImageLightbox = function () {
+            _quitImageLightbox = function (noHistory) {
+                targetIndex = -1;
+                if(!noHistory) {
+                    _pushQuitToHistory();
+                }
                 $wrapper.trigger('quit.ilb2');
@@ -486,3 +615,3 @@ $body.removeClass('imagelightbox-open');
 
-            _addTargets = function( newTargets ) {
+            _addTargets = function (newTargets) {
                 newTargets.on('click.ilb7', {set: targetSet}, function (e) {
@@ -513,2 +642,5 @@ e.preventDefault();
         $(window).on('resize.ilb7', _setImage);
+        if(hasHistorySupport && options.history) {
+            $(window).on('popstate', _popHistory);
+        }
 
@@ -593,3 +725,3 @@ $(document).ready(function() {
             launchIntoFullscreen(document.getElementById(options.id).parentElement) ||
-                exitFullscreen();
+            exitFullscreen();
         }
@@ -599,5 +731,7 @@
 
-        _addTargets($(this));
+        _addTargets(origTargets);
 
-        this.addToImageLightbox = function(elements)  {
+        _openHistory();
+
+        this.addToImageLightbox = function (elements)  {
             _addTargets(elements);
@@ -604,0 +738,0 @@ };

test/src/ilb2.js

 function openDemo (browser, hash) {
     var url = 'http://localhost:8080/docs/index.html';
     if (hash)
-        url += '#'+hash;
+        url += hash;
     browser.url(url);
@@ -37,8 +37,8 @@ browser.expect.element('#main_content').to.be.present;
     'Deep links' : function (browser) {
-        openDemo(browser, 'showImage_2');
+        openDemo(browser, '?imageLightboxIndex=2');
         browser
             .waitForElementVisible('#imagelightbox', 2000)
             .assert.elementPresent('#imagelightbox')
-            .waitForElementVisible('img[src$="images/demo2.jpg"]', 1000)
-            .assert.elementPresent('img[src$="images/demo2.jpg"]');
+            .waitForElementVisible('img[src$="images/demo3.jpg"]', 1000)
+            .assert.elementPresent('img[src$="images/demo3.jpg"]');
         closeDemo(browser);
@@ -66,2 +66,3 @@ },
             .assert.elementPresent('#imagelightbox')
+            .waitForElementVisible('.imagelightbox-arrow-right', 1000)
             .click('.imagelightbox-arrow-right')
@@ -68,0 +69,0 @@ .waitForElementVisible('img[src$="images/demo2.jpg"]', 1000)

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46547757

increased by30.46%

Number of package files

48

increased by11.63%

Lines of code

3338

increased by8.48%

Number of lines in readme file

240

increased by3%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes