imagelightbox - npm Package Compare versions

Comparing version 0.5.3 to 0.5.4

bower.json

 {
   "name": "imagelightbox",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Image Lightbox, Responsive and Touch‑friendly",
@@ -5,0 +5,0 @@ "repository": "https://github.com/rejas/imagelightbox.git",

dist/imagelightbox.min.js

@@ -1,1 +0,1 @@
-!function(t,n,i,e){"use strict";var o=function(){var t=i.body||i.documentElement;return t=t.style,""===t.WebkitTransition?"-webkit-":""===t.MozTransition?"-moz-":""===t.OTransition?"-o-":""===t.transition&&""},a=o()!==!1,r=function(t,n,i){var e={},a=o();e[a+"transform"]="translateX("+n+")",e[a+"transition"]=a+"transform "+i+"s linear",t.css(e)},c="ontouchstart"in n,u=n.navigator.pointerEnabled||n.navigator.msPointerEnabled,d=function(t){if(c)return!0;if(!u||"undefined"==typeof t||"undefined"==typeof t.pointerType)return!1;if("undefined"!=typeof t.MSPOINTER_TYPE_MOUSE){if(t.MSPOINTER_TYPE_MOUSE!==t.pointerType)return!0}else if("mouse"!==t.pointerType)return!0;return!1};t.fn.imageLightbox=function(e){var o=t.extend({selector:"a[data-imagelightbox]",id:"imagelightbox",allowedTypes:"png|jpg|jpeg||gif",animationSpeed:250,activity:!1,arrows:!1,button:!1,caption:!1,enableKeyboard:!0,lockBody:!1,navigation:!1,overlay:!1,preloadNext:!0,quitOnEnd:!1,quitOnImgClick:!1,quitOnDocClick:!0,quitOnEscKey:!0,onStart:function(){o.arrows&&T(this),o.navigation&&b(this,o.selector),o.overlay&&s(),o.button&&v(),o.lockBody&&g(!0)},onEnd:function(){o.activity&&l(),o.arrows&&k(),o.navigation&&E(),o.overlay&&p(),o.caption&&x(),o.button&&h(),o.lockBody&&g(!1)},onLoadStart:function(){o.activity&&f(),o.caption&&x()},onLoadEnd:function(){o.activity&&l(),o.arrows&&t(".imagelightbox-arrow").css("display","block"),o.navigation&&y(o.selector),o.caption&&m()},previousTarget:function(){return this.previousTargetDefault()},previousTargetDefault:function(){var t=w.index(S)-1;if(t<0){if(o.quitOnEnd===!0)return U(),!1;t=w.length-1}S=w.eq(t)},nextTarget:function(){return this.nextTargetDefault()},nextTargetDefault:function(){var t=w.index(S)+1;if(t>=w.length){if(o.quitOnEnd===!0)return U(),!1;t=0}S=w.eq(t)}},e),f=function(){t('<div id="imagelightbox-loading"><div></div></div>').appendTo("body")},l=function(){t("#imagelightbox-loading").remove()},g=function(n){n?t("body").css("overflow","hidden"):t("body").css("overflow","scroll")},s=function(){t('<div id="imagelightbox-overlay"></div>').appendTo("body")},p=function(){t("#imagelightbox-overlay").remove()},v=function(){t('<a href="#" id="imagelightbox-close"></a>').appendTo("body").on("click",function(){return t(this).remove(),U(),!1})},h=function(){t("#imagelightbox-close").remove()},m=function(){var n=t(S).find("img").attr("alt");n&&n.length>0&&t('<div id="imagelightbox-caption">'+n+"</div>").appendTo("body")},x=function(){t("#imagelightbox-caption").remove()},b=function(n,i){var e=t(i);if(e.length){for(var o=t('<div id="imagelightbox-nav"></div>'),a=0;a<e.length;a++)o.append('<a href="#"></a>');o.appendTo("body"),o.on("click touchend",function(){return!1});var r=o.find("a");r.on("click touchend",function(){var n=t(this);if(e.eq(n.index()).attr("href")!==t("#imagelightbox").attr("src")){var i=w.eq(n.index());if(i.length){var o=w.index(S);S=i,M(n.index()<o?"left":"right")}}return r.removeClass("active"),r.eq(n.index()).addClass("active"),!1}).on("touchend",function(){return!1})}},y=function(n){var i=t("#imagelightbox-nav").find("a");i.removeClass("active"),i.eq(t(n).filter('[href="'+t("#imagelightbox").attr("src")+'"]').index(n)).addClass("active")},E=function(){t("#imagelightbox-nav").remove()},T=function(n){var i=t('<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button><button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>');i.appendTo("body"),i.on("click touchend",function(i){return i.preventDefault(),t(this).hasClass("imagelightbox-arrow-left")?P(n):X(n),!1})},k=function(){t(".imagelightbox-arrow").remove()},w=t([]),S=t(),q=t(),O=0,C=0,I=0,D=!1,L=function(){if(!q.length)return!0;var i=.8*t(n).width(),e=n.innerHeight?n.innerHeight:t(n).height(),o=.9*e,a=new Image;a.src=q.attr("src"),a.onload=function(){if(O=a.width,C=a.height,O>i||C>o){var r=O/C>i/o?O/i:C/o;O/=r,C/=r}q.css({width:O+"px",height:C+"px",top:(e-C)/2+"px",left:(t(n).width()-O)/2+"px"})}},M=function(n){if(D)return!1;if(n="undefined"!=typeof n&&("left"===n?1:-1),q.length){var i={opacity:0};a?r(q,100*n-I+"px",o.animationSpeed/1e3):i.left=parseInt(q.css("left"))+100*n+"px",q.animate(i,o.animationSpeed,function(){N()}),I=0}D=!0,o.onLoadStart!==!1&&o.onLoadStart(),setTimeout(function(){var i=S.attr("href");q=t('<img id="'+o.id+'" />').attr("src",i).on("load",function(){var i={opacity:1};if(q.appendTo("body"),L(),q.css("opacity",0),a)r(q,-100*n+"px",0),setTimeout(function(){r(q,"0px",o.animationSpeed/1e3)},50);else{var e=parseInt(q.css("left"));i.left=e+"px",q.css("left",e-100*n+"px")}if(q.animate(i,o.animationSpeed,function(){D=!1,o.onLoadEnd!==!1&&o.onLoadEnd()}),o.preloadNext){var c=w.eq(w.index(S)+1);c.length||(c=w.eq(0)),t("<img />").attr("src",c.attr("href"))}}).on("error",function(){o.onLoadEnd!==!1&&o.onLoadEnd()});var e=0,c=0,f=0;q.on(u?"pointerup MSPointerUp":"click",function(t){if(t.preventDefault(),o.quitOnImgClick)return U(),!1;if(d(t.originalEvent))return!0;var n=(t.pageX||t.originalEvent.pageX)-t.target.offsetLeft;O/2>n?P():X()}).on("touchstart pointerdown MSPointerDown",function(t){return!(d(t.originalEvent)&&!o.quitOnImgClick)||(a&&(f=parseInt(q.css("left"))),void(e=t.originalEvent.pageX||t.originalEvent.touches[0].pageX))}).on("touchmove pointermove MSPointerMove",function(t){return!(d(t.originalEvent)&&!o.quitOnImgClick)||(t.preventDefault(),c=t.originalEvent.pageX||t.originalEvent.touches[0].pageX,I=e-c,void(a?r(q,-I+"px",0):q.css("left",f-I+"px")))}).on("touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",function(t){return!(d(t.originalEvent)&&!o.quitOnImgClick)||void(Math.abs(I)>50?I<0?P():X():a?r(q,"0px",o.animationSpeed/1e3):q.animate({left:f+"px"},o.animationSpeed/2))})},o.animationSpeed+100)},P=function(){o.previousTarget()!==!1&&M("left")},X=function(){o.nextTarget()!==!1&&M("right")},N=function(){return!!q.length&&(q.remove(),void(q=t()))},K=function(t){return!D&&(D=!1,o.onStart!==!1&&o.onStart(),S=t,void M())},U=function(){return!!q.length&&void q.animate({opacity:0},o.animationSpeed,function(){N(),D=!1,o.onEnd!==!1&&o.onEnd()})},_=function(n){n.each(function(){w=w.add(t(this))}),n.on("click",function(n){n.preventDefault(),K(t(this))})};return this.startImageLightbox=function(){this.length>0&&K(t(this[0]))},t(n).on("resize",L),t(i).ready(function(){o.quitOnDocClick&&t(i).on(c?"touchend":"click",function(n){q.length&&!t(n.target).is(q)&&(n.preventDefault(),U())}),o.enableKeyboard&&t(i).on("keyup",function(t){return!q.length||(t.preventDefault(),27===t.keyCode&&o.quitOnEscKey===!0&&U(),void(37===t.keyCode?P():39===t.keyCode&&X()))})}),t(i).off("click",this.selector),_(t(this)),this.loadPreviousImage=function(){P()},this.loadNextImage=function(){X()},this.quitImageLightbox=function(){return U(),this},this.addToImageLightbox=function(t){_(t)},this}}(jQuery,window,document);
+!function(t,n,i,e){"use strict";var o=t("<div/>").attr("id","imagelightbox-loading").append(t("<div/>")),a=t("<button/>",{type:"button",class:"imagelightbox-arrow imagelightbox-arrow-left"}),r=t("<button/>",{type:"button",class:"imagelightbox-arrow imagelightbox-arrow-right"}),l=a.add(r),c=t("<div/>",{id:"imagelightbox-caption"}),u=t("<a/>",{id:"imagelightbox-close"}),d=t("<div/>",{id:"imagelightbox-overlay"}),f=t("<div/>",{id:"imagelightbox-nav"}),g=t("<div/>",{id:"imagelightbox-wrapper"}),s=function(){var t=i.body||i.documentElement;return t=t.style,""===t.WebkitTransition?"-webkit-":""===t.MozTransition?"-moz-":""===t.OTransition?"-o-":""===t.transition&&""},p=s()!==!1,h=function(t,n,i){var e={},o=s();e[o+"transform"]="translateX("+n+")",e[o+"transition"]=o+"transform "+i+"s linear",t.css(e)},v="ontouchstart"in n,b=n.navigator.pointerEnabled||n.navigator.msPointerEnabled,m=function(t){if(v)return!0;if(!b||"undefined"==typeof t||"undefined"==typeof t.pointerType)return!1;if("undefined"!=typeof t.MSPOINTER_TYPE_MOUSE){if(t.MSPOINTER_TYPE_MOUSE!==t.pointerType)return!0}else if("mouse"!==t.pointerType)return!0;return!1};t.fn.imageLightbox=function(e){var a=t.extend({selector:"a[data-imagelightbox]",id:"imagelightbox",allowedTypes:"png|jpg|jpeg||gif",animationSpeed:250,activity:!1,arrows:!1,button:!1,caption:!1,enableKeyboard:!0,lockBody:!1,navigation:!1,overlay:!1,preloadNext:!0,quitOnEnd:!1,quitOnImgClick:!1,quitOnDocClick:!0,quitOnEscKey:!0,onStart:function(){a.arrows&&q(this),a.navigation&&T(this,a.selector),a.overlay&&y(),a.button&&E(),a.lockBody&&x(!0)},onEnd:function(){g.remove().find("*").remove(),a.lockBody&&x(!1)},onLoadStart:function(){a.activity&&r(),a.caption&&S()},onLoadEnd:function(){a.activity&&s(),a.arrows&&l.css("display","block"),a.navigation&&w(a.selector),a.caption&&k()},previousTarget:function(){return this.previousTargetDefault()},previousTargetDefault:function(){var t=O.index(C)-1;if(t<0){if(a.quitOnEnd===!0)return z(),!1;t=O.length-1}C=O.eq(t)},nextTarget:function(){return this.nextTargetDefault()},nextTargetDefault:function(){var t=O.index(C)+1;if(t>=O.length){if(a.quitOnEnd===!0)return z(),!1;t=0}C=O.eq(t)}},e),r=function(){g.append(o)},s=function(){t("#imagelightbox-loading").remove()},x=function(n){n?t("body").css("overflow","hidden"):t("body").css("overflow","scroll")},y=function(){g.append(d)},E=function(){u.appendTo(g).on("click.ilb7",function(){return z(),!1})},k=function(){var n="";t(C).data("ilb2-caption")?n=t(C).data("ilb2-caption"):t(C).find("img").length&&(n=t(C).find("img").attr("alt")),n&&n.length>0&&g.append(c.text(n))},S=function(){c.html("&nbsp;")},T=function(n,i){var e=t(i);if(e.length){for(var o=0;o<e.length;o++)f.append(t("<a/>",{href:"#"}));g.append(f),f.on("click.ilb7 touchend.ilb7",function(){return!1});var a=f.find("a");a.on("click.ilb7 touchend.ilb7",function(){var n=t(this);if(e.eq(n.index()).attr("href")!==t("#imagelightbox").attr("src")){var i=O.eq(n.index());if(i.length){var o=O.index(C);C=i,N(n.index()<o?"left":"right")}}return a.removeClass("active"),a.eq(n.index()).addClass("active"),!1}).on("touchend.ilb7",function(){return!1})}},w=function(n){var i=f.find("a");i.removeClass("active"),i.eq(t(n).filter('[href="'+t("#imagelightbox").attr("src")+'"]').index(n)).addClass("active")},q=function(){g.append(l),l.on("click.ilb7 touchend.ilb7",function(n){return n.preventDefault(),t(this).hasClass("imagelightbox-arrow-left")?K():U(),!1})},O=t([]),C=t(),I=t(),D=0,L=0,M=0,P=!1,X=function(){if(!I.length)return!0;var i=.8*t(n).width(),e=n.innerHeight?n.innerHeight:t(n).height(),o=.9*e,a=new Image;a.src=I.attr("src"),a.onload=function(){if(D=a.width,L=a.height,D>i||L>o){var r=D/L>i/o?D/i:L/o;D/=r,L/=r}I.css({width:D+"px",height:L+"px",top:(e-L)/2+"px",left:(t(n).width()-D)/2+"px"})}},N=function(n){if(P)return!1;if(n="undefined"!=typeof n&&("left"===n?1:-1),I.length){var i={opacity:0};p?h(I,100*n-M+"px",a.animationSpeed/1e3):i.left=parseInt(I.css("left"))+100*n+"px",I.animate(i,a.animationSpeed,function(){_()}),M=0}P=!0,a.onLoadStart!==!1&&a.onLoadStart(),setTimeout(function(){var i=C.attr("href");I=t('<img id="'+a.id+'" />').attr("src",i).on("load.ilb7",function(){var i={opacity:1};if(I.appendTo(g),X(),I.css("opacity",0),p)h(I,-100*n+"px",0),setTimeout(function(){h(I,"0px",a.animationSpeed/1e3)},50);else{var e=parseInt(I.css("left"));i.left=e+"px",I.css("left",e-100*n+"px")}if(I.animate(i,a.animationSpeed,function(){P=!1,a.onLoadEnd!==!1&&a.onLoadEnd()}),a.preloadNext){var o=O.eq(O.index(C)+1);o.length||(o=O.eq(0)),t("<img />").attr("src",o.attr("href"))}}).on("error.ilb7",function(){a.onLoadEnd!==!1&&a.onLoadEnd()});var e=0,o=0,r=0;I.on(b?"pointerup.ilb7 MSPointerUp.ilb7":"click.ilb7",function(t){if(t.preventDefault(),a.quitOnImgClick)return z(),!1;if(m(t.originalEvent))return!0;var n=(t.pageX||t.originalEvent.pageX)-t.target.offsetLeft;D/2>n?K():U()}).on("touchstart.ilb7 pointerdown.ilb7 MSPointerDown.ilb7",function(t){return!(m(t.originalEvent)&&!a.quitOnImgClick)||(p&&(r=parseInt(I.css("left"))),void(e=t.originalEvent.pageX||t.originalEvent.touches[0].pageX))}).on("touchmove.ilb7 pointermove.ilb7 MSPointerMove.ilb7",function(t){return!(m(t.originalEvent)&&!a.quitOnImgClick)||(t.preventDefault(),o=t.originalEvent.pageX||t.originalEvent.touches[0].pageX,M=e-o,void(p?h(I,-M+"px",0):I.css("left",r-M+"px")))}).on("touchend.ilb7 touchcancel.ilb7 pointerup.ilb7 pointercancel.ilb7 MSPointerUp.ilb7 MSPointerCancel.ilb7",function(t){return!(m(t.originalEvent)&&!a.quitOnImgClick)||void(Math.abs(M)>50?M<0?K():U():p?h(I,"0px",a.animationSpeed/1e3):I.animate({left:r+"px"},a.animationSpeed/2))})},a.animationSpeed+100)},K=function(){a.previousTarget()!==!1&&N("left")},U=function(){a.nextTarget()!==!1&&N("right")},_=function(){return!!I.length&&(I.remove(),void(I=t()))},j=function(n){return!P&&(P=!1,a.onStart!==!1&&a.onStart(),t("body").append(g),C=n,void N())},z=function(){return!!I.length&&void I.animate({opacity:0},a.animationSpeed,function(){_(),P=!1,a.onEnd!==!1&&a.onEnd()})},B=function(n){n.each(function(){O=O.add(t(this))}),n.on("click.ilb7",function(n){n.preventDefault(),j(t(this))})};return this.startImageLightbox=function(){this.length>0&&j(t(this[0]))},t(n).on("resize.ilb7",X),t(i).ready(function(){a.quitOnDocClick&&t(i).on(v?"touchend.ilb7":"click.ilb7",function(n){I.length&&!t(n.target).is(I)&&(n.preventDefault(),z())}),a.enableKeyboard&&t(i).on("keyup.ilb7",function(t){return!I.length||(t.preventDefault(),27===t.keyCode&&a.quitOnEscKey===!0&&z(),void(37===t.keyCode?K():39===t.keyCode&&U()))})}),t(i).off("click",this.selector),B(t(this)),this.loadPreviousImage=function(){K()},this.loadNextImage=function(){U()},this.quitImageLightbox=function(){return z(),this},this.addToImageLightbox=function(t){B(t)},this}}(jQuery,window,document);

docs/bower.json

@@ -19,4 +19,4 @@ {
   "dependencies": {
-    "jquery": "^3.1.0"
+    "jquery": "^3.1.1"
   }
 }

docs/javascripts/imagelightbox.js

@@ -1,7 +0,33 @@
-/*
- By Osvaldas Valutis, www.osvaldas.info
- Available for use under the MIT License
- */
+//
+// By Osvaldas Valutis, www.osvaldas.info
+// Available for use under the MIT License
+//
 ;(function ($, window, document, undefined) {
     'use strict';
+    // COMPONENTS //
+    var $activityObject = $('<div/>')
+            .attr('id','imagelightbox-loading')
+            .append($('<div/>')),
+        $arrowLeftObject = $('<button/>',{
+            type: 'button',
+            class: 'imagelightbox-arrow imagelightbox-arrow-left'}),
+        $arrowRightObject = $('<button/>',{
+            type: 'button',
+            class: 'imagelightbox-arrow imagelightbox-arrow-right'}),
+        $arrows = $arrowLeftObject.add($arrowRightObject),
+        $captionObject = $('<div/>', {
+            id: 'imagelightbox-caption'
+        }),
+        $buttonObject =  $('<a/>', {
+            id: 'imagelightbox-close'
+        }),
+        $overlayObject = $('<div/>', {
+            id:'imagelightbox-overlay'
+        }),
+        $navObject = $('<div/>', {
+            id: 'imagelightbox-nav'
+        }),
+        $wrapper = $('<div/>', {
+            id: 'imagelightbox-wrapper'
+        });
 
@@ -95,20 +121,3 @@ var cssTransitionSupport = function () {
                 onEnd: function () {
-                    if (options.activity) {
-                        activityIndicatorOff();
-                    }
-                    if (options.arrows) {
-                        arrowsOff();
-                    }
-                    if (options.navigation) {
-                        navigationOff();
-                    }
-                    if (options.overlay) {
-                        overlayOff();
-                    }
-                    if (options.caption) {
-                        captionOff();
-                    }
-                    if (options.button) {
-                        closeButtonOff();
-                    }
+                    $wrapper.remove().find("*").remove();
                     if (options.lockBody) {
@@ -131,3 +140,3 @@ lockBody(false);
                     if (options.arrows) {
-                        $('.imagelightbox-arrow').css('display', 'block');
+                        $arrows.css('display', 'block');
                     }
@@ -148,3 +157,3 @@ if (options.navigation) {
                         if (options.quitOnEnd === true) {
-                            quitLightbox();
+                            _quitImageLightbox();
                             return false;
@@ -165,3 +174,3 @@ }
                         if (options.quitOnEnd === true) {
-                            quitLightbox();
+                            _quitImageLightbox();
                             return false;
@@ -177,3 +186,3 @@ }
             activityIndicatorOn = function () {
-                $('<div id="imagelightbox-loading"><div></div></div>').appendTo('body');
+                $wrapper.append($activityObject);
             },
@@ -191,25 +200,23 @@ activityIndicatorOff = function () {
             overlayOn = function () {
-                $('<div id="imagelightbox-overlay"></div>').appendTo('body');
+                $wrapper.append($overlayObject);
             },
-            overlayOff = function () {
-                $('#imagelightbox-overlay').remove();
-            },
             closeButtonOn = function () {
-                $('<a href="#" id="imagelightbox-close"></a>').appendTo('body').on('click', function () {
-                    $(this).remove();
-                    quitLightbox();
+                $buttonObject.appendTo($wrapper).on('click.ilb7', function () {
+                    _quitImageLightbox();
                     return false;
                 });
             },
-            closeButtonOff = function () {
-                $('#imagelightbox-close').remove();
-            },
             captionOn = function () {
-                var description = $(target).find('img').attr('alt');
-                if (description && description.length > 0) {
-                    $('<div id="imagelightbox-caption">' + description + '</div>').appendTo('body');
+                var captionText = "";
+                if ($(target).data("ilb2-caption")) {
+                    captionText = $(target).data("ilb2-caption");
+                } else if ($(target).find('img').length) {
+                    captionText = $(target).find('img').attr('alt');
                 }
+                if (captionText && captionText.length > 0) {
+                    $wrapper.append($captionObject.text(captionText));
+                }
             },
             captionOff = function () {
-                $('#imagelightbox-caption').remove();
+                $captionObject.html("&nbsp;");
             },
@@ -219,12 +226,11 @@ navigationOn = function (instance, selector) {
                 if (images.length) {
-                    var nav = $('<div id="imagelightbox-nav"></div>');
                     for (var i = 0; i < images.length; i++) {
-                        nav.append('<a href="#"></a>');
+                        $navObject.append($('<a/>',{href:'#'}));
                     }
-                    nav.appendTo('body');
-                    nav.on('click touchend', function () {
+                    $wrapper.append($navObject);
+                    $navObject.on('click.ilb7 touchend.ilb7', function () {
                         return false;
                     });
-                    var navItems = nav.find('a');
-                    navItems.on('click touchend', function () {
+                    var navItems = $navObject.find('a');
+                    navItems.on('click.ilb7 touchend.ilb7', function () {
                         var $this = $(this);
@@ -236,3 +242,3 @@ if (images.eq($this.index()).attr('href') !== $('#imagelightbox').attr('src')) {
                                 target = tmpTarget;
-                                loadImage($this.index() < currentIndex ? 'left' : 'right');
+                                _loadImage($this.index() < currentIndex ? 'left' : 'right');
                             }
@@ -243,3 +249,3 @@ }
                         return false;
-                    }).on('touchend', function () {
+                    }).on('touchend.ilb7', function () {
                         return false;
@@ -250,19 +256,14 @@ });
             navigationUpdate = function (selector) {
-                var items = $('#imagelightbox-nav').find('a');
+                var items = $navObject.find('a');
                 items.removeClass('active');
                 items.eq($(selector).filter('[href="' + $('#imagelightbox').attr('src') + '"]').index(selector)).addClass('active');
             },
-            navigationOff = function () {
-                $('#imagelightbox-nav').remove();
-            },
-            arrowsOn = function (instance) {
-                var $arrows = $('<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button>' +
-                    '<button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>');
-                $arrows.appendTo('body');
-                $arrows.on('click touchend', function (e) {
+            arrowsOn = function () {
+                $wrapper.append($arrows);
+                $arrows.on('click.ilb7 touchend.ilb7', function (e) {
                     e.preventDefault();
                     if ($(this).hasClass('imagelightbox-arrow-left')) {
-                        loadPreviousImage(instance);
+                        _loadPreviousImage();
                     } else {
-                        loadNextImage(instance);
+                        _loadNextImage();
                     }
@@ -272,5 +273,2 @@ return false;
             },
-            arrowsOff = function () {
-                $('.imagelightbox-arrow').remove();
-            },
 
@@ -285,11 +283,10 @@ targets = $([]),
 
-            /* TODO make it work again
-             isTargetValid = function (element) {
-             var classic = $(element).prop('tagName').toLowerCase() === 'a' && ( new RegExp('.(' + options.allowedTypes + ')$', 'i') ).test($(element).attr('href'));
-             var html5 = $(element).attr('data-lightbox') !== undefined;
-             return classic || html5;
-             },
-             */
+            // TODO make it work again
+            // isTargetValid = function (element) {
+            //   var classic = $(element).prop('tagName').toLowerCase() === 'a' && ( new RegExp('.(' + options.allowedTypes + ')$', 'i') ).test($(element).attr('href'));
+            //   var html5 = $(element).attr('data-lightbox') !== undefined;
+            //   return classic || html5;
+            // },
 
-            setImage = function () {
+            _setImage = function () {
                 if (!image.length) {
@@ -324,3 +321,3 @@ return true;
 
-            loadImage = function (direction) {
+            _loadImage = function (direction) {
                 if (inProgress) {
@@ -341,3 +338,3 @@ return false;
                     image.animate(params, options.animationSpeed, function () {
-                        removeImage();
+                        _removeImage();
                     });
@@ -359,7 +356,7 @@ swipeDiff = 0;
                         .attr('src', imgPath)
-                        .on('load', function () {
+                        .on('load.ilb7', function () {
                             var params = {'opacity': 1};
 
-                            image.appendTo('body');
-                            setImage();
+                            image.appendTo($wrapper);
+                            _setImage();
                             image.css('opacity', 0);
@@ -391,3 +388,3 @@ if (isCssTransitionSupport) {
                         })
-                        .on('error', function () {
+                        .on('error.ilb7', function () {
                             if (options.onLoadEnd !== false) {
@@ -402,6 +399,6 @@ options.onLoadEnd();
 
-                    image.on(hasPointers ? 'pointerup MSPointerUp' : 'click', function (e) {
+                    image.on(hasPointers ? 'pointerup.ilb7 MSPointerUp.ilb7' : 'click.ilb7', function (e) {
                         e.preventDefault();
                         if (options.quitOnImgClick) {
-                            quitLightbox();
+                            _quitImageLightbox();
                             return false;
@@ -414,8 +411,8 @@ }
                         if (imageWidth / 2 > posX) {
-                            loadPreviousImage();
+                            _loadPreviousImage();
                         } else {
-                            loadNextImage();
+                            _loadNextImage();
                         }
                     })
-                        .on('touchstart pointerdown MSPointerDown', function (e) {
+                        .on('touchstart.ilb7 pointerdown.ilb7 MSPointerDown.ilb7', function (e) {
                             if (!wasTouched(e.originalEvent) || options.quitOnImgClick) {
@@ -429,3 +426,3 @@ return true;
                         })
-                        .on('touchmove pointermove MSPointerMove', function (e) {
+                        .on('touchmove.ilb7 pointermove.ilb7 MSPointerMove.ilb7', function (e) {
                             if (!wasTouched(e.originalEvent) || options.quitOnImgClick) {
@@ -443,3 +440,3 @@ return true;
                         })
-                        .on('touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel', function (e) {
+                        .on('touchend.ilb7 touchcancel.ilb7 pointerup.ilb7 pointercancel.ilb7 MSPointerUp.ilb7 MSPointerCancel.ilb7', function (e) {
                             if (!wasTouched(e.originalEvent) || options.quitOnImgClick) {
@@ -450,5 +447,5 @@ return true;
                                 if (swipeDiff < 0) {
-                                    loadPreviousImage();
+                                    _loadPreviousImage();
                                 } else {
-                                    loadNextImage();
+                                    _loadNextImage();
                                 }
@@ -467,15 +464,15 @@ } else {
 
-            loadPreviousImage = function () {
+            _loadPreviousImage = function () {
                 if (options.previousTarget() !== false) {
-                    loadImage('left');
+                    _loadImage('left');
                 }
             },
 
-            loadNextImage = function () {
+            _loadNextImage = function () {
                 if (options.nextTarget() !== false) {
-                    loadImage('right');
+                    _loadImage('right');
                 }
             },
 
-            removeImage = function () {
+            _removeImage = function () {
                 if (!image.length) {
@@ -488,3 +485,3 @@ return false;
 
-            openLightbox = function ($target) {
+            _openImageLightbox = function ($target) {
                 if (inProgress) {
@@ -497,7 +494,8 @@ return false;
                 }
+                $('body').append($wrapper);
                 target = $target;
-                loadImage();
+                _loadImage();
             },
 
-            quitLightbox = function () {
+            _quitImageLightbox = function () {
                 if (!image.length) {
@@ -507,3 +505,3 @@ return false;
                 image.animate({'opacity': 0}, options.animationSpeed, function () {
-                    removeImage();
+                    _removeImage();
                     inProgress = false;
@@ -516,3 +514,3 @@ if (options.onEnd !== false) {
 
-            addTargets = function( newTargets ) {
+            _addTargets = function( newTargets ) {
                 newTargets.each(function () {
@@ -522,5 +520,5 @@ targets = targets.add($(this));
 
-                newTargets.on('click', function (e) {
+                newTargets.on('click.ilb7', function (e) {
                     e.preventDefault();
-                    openLightbox($(this));
+                    _openImageLightbox($(this));
                 });
@@ -531,14 +529,14 @@ };
             if (this.length > 0) {
-                openLightbox($(this[0]));
+                _openImageLightbox($(this[0]));
             }
         };
 
-        $(window).on('resize', setImage);
+        $(window).on('resize.ilb7', _setImage);
 
         $(document).ready(function() {
             if (options.quitOnDocClick) {
-                $(document).on(hasTouch ? 'touchend' : 'click', function (e) {
+                $(document).on(hasTouch ? 'touchend.ilb7' : 'click.ilb7', function (e) {
                     if (image.length && !$(e.target).is(image)) {
                         e.preventDefault();
-                        quitLightbox();
+                        _quitImageLightbox();
                     }
@@ -549,3 +547,3 @@ });
             if (options.enableKeyboard) {
-                $(document).on('keyup', function (e) {
+                $(document).on('keyup.ilb7', function (e) {
                     if (!image.length) {
@@ -556,8 +554,8 @@ return true;
                     if (e.keyCode === 27 && options.quitOnEscKey === true) {
-                        quitLightbox();
+                        _quitImageLightbox();
                     }
                     if (e.keyCode === 37) {
-                        loadPreviousImage();
+                        _loadPreviousImage();
                     } else if (e.keyCode === 39) {
-                        loadNextImage();
+                        _loadNextImage();
                     }
@@ -570,14 +568,14 @@ });
 
-        addTargets($(this));
+        _addTargets($(this));
 
         this.loadPreviousImage = function () {
-            loadPreviousImage();
+            _loadPreviousImage();
         };
 
         this.loadNextImage = function () {
-            loadNextImage();
+            _loadNextImage();
         };
 
         this.quitImageLightbox = function () {
-            quitLightbox();
+            _quitImageLightbox();
             return this;
@@ -587,3 +585,3 @@ };
         this.addToImageLightbox = function(elements)  {
-            addTargets(elements);
+            _addTargets(elements);
         };
@@ -590,0 +588,0 @@

docs/javascripts/main.js

@@ -30,2 +30,3 @@ $(document).ready(function() {
         activity: true,
+        arrows: true,
         button: true,
@@ -32,0 +33,0 @@ caption: true,

gulpfile.js

@@ -5,2 +5,3 @@ var gulp            = require('gulp'),
     jshint          = require('gulp-jshint'),
+    lintspaces      = require("gulp-lintspaces"),
     rename          = require('gulp-rename'),
@@ -34,2 +35,8 @@ uglify          = require('gulp-uglify'),
 
+gulp.task("editorconfig", function() {
+    return gulp.src('src/imagelightbox.js')
+        .pipe(lintspaces({editorconfig: './.editorconfig'} ))
+        .pipe(lintspaces.reporter());
+});
+
 gulp.task('jshint', function () {
@@ -41,3 +48,3 @@ return gulp.src('src/imagelightbox.js')
 
-gulp.task('copy:js', ['jshint'], function () {
+gulp.task('copy:js', ['editorconfig', 'jshint'], function () {
     return gulp.src('src/imagelightbox.js')
@@ -70,1 +77,2 @@ .pipe(gulp.dest('docs/javascripts/'));
 gulp.task('default', ['build']);
+

package.json

 {
   "name": "imagelightbox",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Image Lightbox, Responsive and Touch‑friendly",
@@ -15,2 +15,3 @@ "repository": "https://github.com/rejas/imagelightbox.git",
     "gulp-jshint": "^2.0.1",
+    "gulp-lintspaces": "^0.5.0",
     "gulp-rename": "^1.2.2",
@@ -17,0 +18,0 @@ "gulp-uglify": "^2.0.0",

README.md

@@ -79,2 +79,12 @@ imagelightbox
 ````
+## Adding captions to lightbox 
+
+add an "ilb2-caption" data-attribute to the element, fallback value is the alt-attribute of the thumbnail-image
+                
+````html    
+    <a data-imagelightbox="x" data-ilb2-caption="caption text"
+        href="image.jpg">
+        <img src="thumbnail.jpg" alt="fallback caption"/>
+    </a>
+````         
              
@@ -102,5 +112,6 @@ ## Adding images dynamically to lightbox
 
-* 0.5.3 Add lockBody option thanks to @Paxperscientiam
+* 0.5.4 Add ilb2-caption option (@Paxperscientiam)
+* 0.5.3 Add lockBody option (@Paxperscientiam)
 * 0.5.2 Updates to demo page, cleanups
 * 0.5.1 Fix startImageLightbox
 * 0.5.0 Support jQuery3

src/imagelightbox.js

@@ -1,7 +0,33 @@
-/*
- By Osvaldas Valutis, www.osvaldas.info
- Available for use under the MIT License
- */
+//
+// By Osvaldas Valutis, www.osvaldas.info
+// Available for use under the MIT License
+//
 ;(function ($, window, document, undefined) {
     'use strict';
+    // COMPONENTS //
+    var $activityObject = $('<div/>')
+            .attr('id','imagelightbox-loading')
+            .append($('<div/>')),
+        $arrowLeftObject = $('<button/>',{
+            type: 'button',
+            class: 'imagelightbox-arrow imagelightbox-arrow-left'}),
+        $arrowRightObject = $('<button/>',{
+            type: 'button',
+            class: 'imagelightbox-arrow imagelightbox-arrow-right'}),
+        $arrows = $arrowLeftObject.add($arrowRightObject),
+        $captionObject = $('<div/>', {
+            id: 'imagelightbox-caption'
+        }),
+        $buttonObject =  $('<a/>', {
+            id: 'imagelightbox-close'
+        }),
+        $overlayObject = $('<div/>', {
+            id:'imagelightbox-overlay'
+        }),
+        $navObject = $('<div/>', {
+            id: 'imagelightbox-nav'
+        }),
+        $wrapper = $('<div/>', {
+            id: 'imagelightbox-wrapper'
+        });
 
@@ -95,20 +121,3 @@ var cssTransitionSupport = function () {
                 onEnd: function () {
-                    if (options.activity) {
-                        activityIndicatorOff();
-                    }
-                    if (options.arrows) {
-                        arrowsOff();
-                    }
-                    if (options.navigation) {
-                        navigationOff();
-                    }
-                    if (options.overlay) {
-                        overlayOff();
-                    }
-                    if (options.caption) {
-                        captionOff();
-                    }
-                    if (options.button) {
-                        closeButtonOff();
-                    }
+                    $wrapper.remove().find("*").remove();
                     if (options.lockBody) {
@@ -131,3 +140,3 @@ lockBody(false);
                     if (options.arrows) {
-                        $('.imagelightbox-arrow').css('display', 'block');
+                        $arrows.css('display', 'block');
                     }
@@ -148,3 +157,3 @@ if (options.navigation) {
                         if (options.quitOnEnd === true) {
-                            quitLightbox();
+                            _quitImageLightbox();
                             return false;
@@ -165,3 +174,3 @@ }
                         if (options.quitOnEnd === true) {
-                            quitLightbox();
+                            _quitImageLightbox();
                             return false;
@@ -177,3 +186,3 @@ }
             activityIndicatorOn = function () {
-                $('<div id="imagelightbox-loading"><div></div></div>').appendTo('body');
+                $wrapper.append($activityObject);
             },
@@ -191,25 +200,23 @@ activityIndicatorOff = function () {
             overlayOn = function () {
-                $('<div id="imagelightbox-overlay"></div>').appendTo('body');
+                $wrapper.append($overlayObject);
             },
-            overlayOff = function () {
-                $('#imagelightbox-overlay').remove();
-            },
             closeButtonOn = function () {
-                $('<a href="#" id="imagelightbox-close"></a>').appendTo('body').on('click', function () {
-                    $(this).remove();
-                    quitLightbox();
+                $buttonObject.appendTo($wrapper).on('click.ilb7', function () {
+                    _quitImageLightbox();
                     return false;
                 });
             },
-            closeButtonOff = function () {
-                $('#imagelightbox-close').remove();
-            },
             captionOn = function () {
-                var description = $(target).find('img').attr('alt');
-                if (description && description.length > 0) {
-                    $('<div id="imagelightbox-caption">' + description + '</div>').appendTo('body');
+                var captionText = "";
+                if ($(target).data("ilb2-caption")) {
+                    captionText = $(target).data("ilb2-caption");
+                } else if ($(target).find('img').length) {
+                    captionText = $(target).find('img').attr('alt');
                 }
+                if (captionText && captionText.length > 0) {
+                    $wrapper.append($captionObject.text(captionText));
+                }
             },
             captionOff = function () {
-                $('#imagelightbox-caption').remove();
+                $captionObject.html("&nbsp;");
             },
@@ -219,12 +226,11 @@ navigationOn = function (instance, selector) {
                 if (images.length) {
-                    var nav = $('<div id="imagelightbox-nav"></div>');
                     for (var i = 0; i < images.length; i++) {
-                        nav.append('<a href="#"></a>');
+                        $navObject.append($('<a/>',{href:'#'}));
                     }
-                    nav.appendTo('body');
-                    nav.on('click touchend', function () {
+                    $wrapper.append($navObject);
+                    $navObject.on('click.ilb7 touchend.ilb7', function () {
                         return false;
                     });
-                    var navItems = nav.find('a');
-                    navItems.on('click touchend', function () {
+                    var navItems = $navObject.find('a');
+                    navItems.on('click.ilb7 touchend.ilb7', function () {
                         var $this = $(this);
@@ -236,3 +242,3 @@ if (images.eq($this.index()).attr('href') !== $('#imagelightbox').attr('src')) {
                                 target = tmpTarget;
-                                loadImage($this.index() < currentIndex ? 'left' : 'right');
+                                _loadImage($this.index() < currentIndex ? 'left' : 'right');
                             }
@@ -243,3 +249,3 @@ }
                         return false;
-                    }).on('touchend', function () {
+                    }).on('touchend.ilb7', function () {
                         return false;
@@ -250,19 +256,14 @@ });
             navigationUpdate = function (selector) {
-                var items = $('#imagelightbox-nav').find('a');
+                var items = $navObject.find('a');
                 items.removeClass('active');
                 items.eq($(selector).filter('[href="' + $('#imagelightbox').attr('src') + '"]').index(selector)).addClass('active');
             },
-            navigationOff = function () {
-                $('#imagelightbox-nav').remove();
-            },
-            arrowsOn = function (instance) {
-                var $arrows = $('<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button>' +
-                    '<button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>');
-                $arrows.appendTo('body');
-                $arrows.on('click touchend', function (e) {
+            arrowsOn = function () {
+                $wrapper.append($arrows);
+                $arrows.on('click.ilb7 touchend.ilb7', function (e) {
                     e.preventDefault();
                     if ($(this).hasClass('imagelightbox-arrow-left')) {
-                        loadPreviousImage(instance);
+                        _loadPreviousImage();
                     } else {
-                        loadNextImage(instance);
+                        _loadNextImage();
                     }
@@ -272,5 +273,2 @@ return false;
             },
-            arrowsOff = function () {
-                $('.imagelightbox-arrow').remove();
-            },
 
@@ -285,11 +283,10 @@ targets = $([]),
 
-            /* TODO make it work again
-             isTargetValid = function (element) {
-             var classic = $(element).prop('tagName').toLowerCase() === 'a' && ( new RegExp('.(' + options.allowedTypes + ')$', 'i') ).test($(element).attr('href'));
-             var html5 = $(element).attr('data-lightbox') !== undefined;
-             return classic || html5;
-             },
-             */
+            // TODO make it work again
+            // isTargetValid = function (element) {
+            //   var classic = $(element).prop('tagName').toLowerCase() === 'a' && ( new RegExp('.(' + options.allowedTypes + ')$', 'i') ).test($(element).attr('href'));
+            //   var html5 = $(element).attr('data-lightbox') !== undefined;
+            //   return classic || html5;
+            // },
 
-            setImage = function () {
+            _setImage = function () {
                 if (!image.length) {
@@ -324,3 +321,3 @@ return true;
 
-            loadImage = function (direction) {
+            _loadImage = function (direction) {
                 if (inProgress) {
@@ -341,3 +338,3 @@ return false;
                     image.animate(params, options.animationSpeed, function () {
-                        removeImage();
+                        _removeImage();
                     });
@@ -359,7 +356,7 @@ swipeDiff = 0;
                         .attr('src', imgPath)
-                        .on('load', function () {
+                        .on('load.ilb7', function () {
                             var params = {'opacity': 1};
 
-                            image.appendTo('body');
-                            setImage();
+                            image.appendTo($wrapper);
+                            _setImage();
                             image.css('opacity', 0);
@@ -391,3 +388,3 @@ if (isCssTransitionSupport) {
                         })
-                        .on('error', function () {
+                        .on('error.ilb7', function () {
                             if (options.onLoadEnd !== false) {
@@ -402,6 +399,6 @@ options.onLoadEnd();
 
-                    image.on(hasPointers ? 'pointerup MSPointerUp' : 'click', function (e) {
+                    image.on(hasPointers ? 'pointerup.ilb7 MSPointerUp.ilb7' : 'click.ilb7', function (e) {
                         e.preventDefault();
                         if (options.quitOnImgClick) {
-                            quitLightbox();
+                            _quitImageLightbox();
                             return false;
@@ -414,8 +411,8 @@ }
                         if (imageWidth / 2 > posX) {
-                            loadPreviousImage();
+                            _loadPreviousImage();
                         } else {
-                            loadNextImage();
+                            _loadNextImage();
                         }
                     })
-                        .on('touchstart pointerdown MSPointerDown', function (e) {
+                        .on('touchstart.ilb7 pointerdown.ilb7 MSPointerDown.ilb7', function (e) {
                             if (!wasTouched(e.originalEvent) || options.quitOnImgClick) {
@@ -429,3 +426,3 @@ return true;
                         })
-                        .on('touchmove pointermove MSPointerMove', function (e) {
+                        .on('touchmove.ilb7 pointermove.ilb7 MSPointerMove.ilb7', function (e) {
                             if (!wasTouched(e.originalEvent) || options.quitOnImgClick) {
@@ -443,3 +440,3 @@ return true;
                         })
-                        .on('touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel', function (e) {
+                        .on('touchend.ilb7 touchcancel.ilb7 pointerup.ilb7 pointercancel.ilb7 MSPointerUp.ilb7 MSPointerCancel.ilb7', function (e) {
                             if (!wasTouched(e.originalEvent) || options.quitOnImgClick) {
@@ -450,5 +447,5 @@ return true;
                                 if (swipeDiff < 0) {
-                                    loadPreviousImage();
+                                    _loadPreviousImage();
                                 } else {
-                                    loadNextImage();
+                                    _loadNextImage();
                                 }
@@ -467,15 +464,15 @@ } else {
 
-            loadPreviousImage = function () {
+            _loadPreviousImage = function () {
                 if (options.previousTarget() !== false) {
-                    loadImage('left');
+                    _loadImage('left');
                 }
             },
 
-            loadNextImage = function () {
+            _loadNextImage = function () {
                 if (options.nextTarget() !== false) {
-                    loadImage('right');
+                    _loadImage('right');
                 }
             },
 
-            removeImage = function () {
+            _removeImage = function () {
                 if (!image.length) {
@@ -488,3 +485,3 @@ return false;
 
-            openLightbox = function ($target) {
+            _openImageLightbox = function ($target) {
                 if (inProgress) {
@@ -497,7 +494,8 @@ return false;
                 }
+                $('body').append($wrapper);
                 target = $target;
-                loadImage();
+                _loadImage();
             },
 
-            quitLightbox = function () {
+            _quitImageLightbox = function () {
                 if (!image.length) {
@@ -507,3 +505,3 @@ return false;
                 image.animate({'opacity': 0}, options.animationSpeed, function () {
-                    removeImage();
+                    _removeImage();
                     inProgress = false;
@@ -516,3 +514,3 @@ if (options.onEnd !== false) {
 
-            addTargets = function( newTargets ) {
+            _addTargets = function( newTargets ) {
                 newTargets.each(function () {
@@ -522,5 +520,5 @@ targets = targets.add($(this));
 
-                newTargets.on('click', function (e) {
+                newTargets.on('click.ilb7', function (e) {
                     e.preventDefault();
-                    openLightbox($(this));
+                    _openImageLightbox($(this));
                 });
@@ -531,14 +529,14 @@ };
             if (this.length > 0) {
-                openLightbox($(this[0]));
+                _openImageLightbox($(this[0]));
             }
         };
 
-        $(window).on('resize', setImage);
+        $(window).on('resize.ilb7', _setImage);
 
         $(document).ready(function() {
             if (options.quitOnDocClick) {
-                $(document).on(hasTouch ? 'touchend' : 'click', function (e) {
+                $(document).on(hasTouch ? 'touchend.ilb7' : 'click.ilb7', function (e) {
                     if (image.length && !$(e.target).is(image)) {
                         e.preventDefault();
-                        quitLightbox();
+                        _quitImageLightbox();
                     }
@@ -549,3 +547,3 @@ });
             if (options.enableKeyboard) {
-                $(document).on('keyup', function (e) {
+                $(document).on('keyup.ilb7', function (e) {
                     if (!image.length) {
@@ -556,8 +554,8 @@ return true;
                     if (e.keyCode === 27 && options.quitOnEscKey === true) {
-                        quitLightbox();
+                        _quitImageLightbox();
                     }
                     if (e.keyCode === 37) {
-                        loadPreviousImage();
+                        _loadPreviousImage();
                     } else if (e.keyCode === 39) {
-                        loadNextImage();
+                        _loadNextImage();
                     }
@@ -570,14 +568,14 @@ });
 
-        addTargets($(this));
+        _addTargets($(this));
 
         this.loadPreviousImage = function () {
-            loadPreviousImage();
+            _loadPreviousImage();
         };
 
         this.loadNextImage = function () {
-            loadNextImage();
+            _loadNextImage();
         };
 
         this.quitImageLightbox = function () {
-            quitLightbox();
+            _quitImageLightbox();
             return this;
@@ -587,3 +585,3 @@ };
         this.addToImageLightbox = function(elements)  {
-            addTargets(elements);
+            _addTargets(elements);
         };
@@ -590,0 +588,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3638343

increased by52.3%

Number of package files

161

increased by274.42%

Lines of code

27777

increased by1013.31%

Number of lines in readme file

116

increased by10.48%

Worsened metrics

Dev dependency count

11

increased by10%

Number of low license alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes