From 61a6b8bb7fd76a0e2ac231c17e25529f1f25857a Mon Sep 17 00:00:00 2001 From: root Date: Tue, 3 May 2016 08:36:20 +0200 Subject: [PATCH] Bugfix for #41 and added option for additional html inside images #40 --- README.md | 2 ++ bower.json | 2 +- dist/simple-lightbox.js | 11 +++++++---- dist/simple-lightbox.min.js | 2 +- package.json | 2 +- 5 files changed, 12 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e6a10ec..c24e314 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,7 @@ var lightbox = $('.gallery a').simpleLightbox(options); | disableScroll | true | bool | stop scrolling page if lightbox is opened | | alertError | true | bool | show an alert, if image was not found. If false error will be ignored | | alertErrorMessage | 'Image not found, next image will be loaded' | string | the message displayed if image was not found | +| additionalHtml | false | string | Additional HTML showing inside every image. Usefull for watermark etc. If false nothing is added | ### Events | Name | Description | @@ -100,6 +101,7 @@ var lightbox2 = $('.lighbox-2 a').simpleLightbox(); ``` ### Changelog +**1.8.4 - Bugfix for #41 and added option for additional html inside images #40** **1.8.3 - Bugfix for #38 and small other fix for loop false option** **1.8.2 - Better bugfix for #33, finally fixing multiple lightbox on one page slowness issues!** **1.8.1 - Bugfix for #31, #32 and #33** diff --git a/bower.json b/bower.json index a98ce84..feb8ccc 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "simplelightbox", - "version": "1.8.3", + "version": "1.8.4", "homepage": "http://andreknieriem.de/simple-lightbox", "authors": [ "André Rinas (http://andreknieriem.de)" diff --git a/dist/simple-lightbox.js b/dist/simple-lightbox.js index d60c334..ecbe5b6 100644 --- a/dist/simple-lightbox.js +++ b/dist/simple-lightbox.js @@ -39,7 +39,8 @@ $.fn.simpleLightbox = function( options ) disableRightClick: false, disableScroll: true, alertError: true, - alertErrorMessage: 'Image not found, next image will be loaded' + alertErrorMessage: 'Image not found, next image will be loaded', + additionalHtml: false }, options ); // global variables @@ -224,7 +225,9 @@ $.fn.simpleLightbox = function( options ) animating = false; setCaption(captionText); } - + if(options.additionalHtml && $('.sl-additional-html').length == 0){ + $('
').html(options.additionalHtml).addClass('sl-additional-html').appendTo($('.sl-image')); + } } }, setCaption = function(captiontext){ @@ -243,7 +246,7 @@ $.fn.simpleLightbox = function( options ) $( window ).on( 'resize.'+prefix, adjustImage ); // close lightbox on close btn - $( document ).on('click.'+prefix, '.sl-close', function(e){ + $( document ).on('click.'+prefix+ ' touchstart.'+prefix, '.sl-close', function(e){ e.preventDefault(); if(opened){ close();} }); @@ -408,7 +411,7 @@ $.fn.simpleLightbox = function( options ) }); // close on click on doc - $( document ).click(function(e){ + $( document ).on('click.'+prefix+ ' touchstart.'+prefix, function(e){ if(opened){ if((options.docClose && $(e.target).closest('.sl-image').length == 0 && $(e.target).closest('.sl-navigation').length == 0)){ close(); diff --git a/dist/simple-lightbox.min.js b/dist/simple-lightbox.min.js index b5bf22a..aff3fbd 100644 --- a/dist/simple-lightbox.min.js +++ b/dist/simple-lightbox.min.js @@ -2,4 +2,4 @@ By André Rinas, www.andreknieriem.de Available for use under the MIT License */ -!function(e,t,n,i){"use strict";e.fn.simpleLightbox=function(i){var i=e.extend({overlay:!0,spinner:!0,nav:!0,navText:["‹","›"],captions:!0,captionDelay:0,captionSelector:"img",captionType:"attr",captionsData:"title",captionPosition:"bottom",close:!0,closeText:"×",showCounter:!0,fileExt:"png|jpg|jpeg|gif",animationSlide:!0,animationSpeed:250,preloading:!0,enableKeyboard:!0,loop:!0,docClose:!0,swipeTolerance:50,className:"simple-lightbox",widthRatio:.8,heightRatio:.9,disableRightClick:!1,disableScroll:!0,alertError:!0,alertErrorMessage:"Image not found, next image will be loaded"},i),a=(t.navigator.pointerEnabled||t.navigator.msPointerEnabled,0),o=e(),s=function(){var e=n.body||n.documentElement,e=e.style;return""==e.WebkitTransition?"-webkit-":""==e.MozTransition?"-moz-":""==e.OTransition?"-o-":""==e.transition?"":!1},l=!1,r=[],d=this,s=s(),c=s!==!1?!0:!1,p="simplelb",h=e("
").addClass("sl-overlay"),g=e(""),m=e("
").addClass("sl-counter").html('/'),v=!1,x=0,b=e("
").addClass("sl-caption pos-"+i.captionPosition),y=e("
").addClass("sl-image"),w=e("
").addClass("sl-wrapper").addClass(i.className),E=function(t){return i.fileExt?"a"==e(t).prop("tagName").toLowerCase()&&new RegExp(".("+i.fileExt+")$","i").test(e(t).attr("href")):!0},C=function(){i.close&&g.appendTo(w),i.showCounter&&d.length>1&&(m.appendTo(w),m.find(".sl-total").text(d.length)),i.nav&&u.appendTo(w),i.spinner&&f.appendTo(w)},T=function(t){t.trigger(e.Event("show.simplelightbox")),i.disableScroll&&P("hide"),w.appendTo("body"),y.appendTo(w),i.overlay&&h.appendTo(e("body")),v=!0,x=d.index(t),o=e("").hide().attr("src",t.attr("href")),-1==r.indexOf(t.attr("href"))&&r.push(t.attr("href")),y.html("").attr("style",""),o.appendTo(y),q(),h.fadeIn("fast"),e(".sl-close").fadeIn("fast"),f.show(),u.fadeIn("fast"),e(".sl-wrapper .sl-counter .sl-current").text(x+1),m.fadeIn("fast"),S(),i.preloading&&M(),setTimeout(function(){t.trigger(e.Event("shown.simplelightbox"))},i.animationSpeed)},S=function(n){if(o.length){var a=new Image,s=e(t).width()*i.widthRatio,p=e(t).height()*i.heightRatio;a.src=o.attr("src"),e(a).bind("error",function(t){return d.eq(x).trigger(e.Event("error.simplelightbox")),v=!1,l=!0,f.hide(),i.alertError?(alert(i.alertErrorMessage),void R(1==n||-1==n?n:1)):void 0}),a.onload=function(){"undefined"!=typeof n&&d.eq(x).trigger(e.Event("changed.simplelightbox")).trigger(e.Event((1===n?"nextDone":"prevDone")+".simplelightbox")),-1==r.indexOf(o.attr("src"))&&r.push(o.attr("src"));var h=a.width,g=a.height;if(h>s||g>p){var u=h/g>s/p?h/s:g/p;h/=u,g/=u}e(".sl-image").css({top:(e(t).height()-g)/2+"px",left:(e(t).width()-h)/2+"px"}),f.hide(),o.css({width:h+"px",height:g+"px"}).fadeIn("fast"),l=!0;var m="self"==i.captionSelector?d.eq(x):d.eq(x).find(i.captionSelector);if("data"==i.captionType)var b=m.data(i.captionsData);else if("text"==i.captionType)var b=m.html();else var b=m.prop(i.captionsData);if(i.loop||(0==x&&e(".sl-prev").hide(),x>=d.length-1&&e(".sl-next").hide(),x>0&&e(".sl-prev").show(),xa&&(t=!1),x>=d.length-1&&a>0&&(t=!1)),Math.abs(a)>i.swipeTolerance&&t?R(a>0?1:-1):i.animationSlide&&(c?I(i.animationSpeed/1e3,"0px"):y.animate({left:h+"px"},i.animationSpeed/2))}})},D=function(){u.off("click","button"),e(n).off("click."+p,".sl-close"),e(t).off("resize."+p)},M=function(){var t=0>x+1?d.length-1:x+1>=d.length-1?0:x+1,n=0>x-1?d.length-1:x-1>=d.length-1?0:x-1;e("").attr("src",d.eq(t).attr("href")).load(function(){-1==r.indexOf(e(this).attr("src"))&&r.push(e(this).attr("src")),d.eq(x).trigger(e.Event("nextImageLoaded.simplelightbox"))}),e("").attr("src",d.eq(n).attr("href")).load(function(){-1==r.indexOf(e(this).attr("src"))&&r.push(e(this).attr("src")),d.eq(x).trigger(e.Event("prevImageLoaded.simplelightbox"))})},R=function(t){d.eq(x).trigger(e.Event("change.simplelightbox")).trigger(e.Event((1===t?"next":"prev")+".simplelightbox"));var n=x+t;if(!(v||(0>n||n>=d.length)&&0==i.loop)){x=0>n?d.length-1:n>d.length-1?0:n,e(".sl-wrapper .sl-counter .sl-current").text(x+1);var s={opacity:0};i.animationSlide&&(c?I(i.animationSpeed/1e3,-100*t-a+"px"):s.left=parseInt(e(".sl-image").css("left"))+-100*t+"px"),e(".sl-image").animate(s,i.animationSpeed,function(){setTimeout(function(){var n=d.eq(x);o.attr("src",n.attr("href")),-1==r.indexOf(n.attr("href"))&&f.show(),e(".sl-caption").remove(),S(t),i.preloading&&M()},100)})}},O=function(){if(!v){var t=d.eq(x),n=!1;t.trigger(e.Event("close.simplelightbox")),e(".sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter").fadeOut("fast",function(){i.disableScroll&&P("show"),e(".sl-wrapper, .sl-overlay").remove(),D(),n||t.trigger(e.Event("closed.simplelightbox")),n=!0}),o=e(),l=!1,v=!1}},P=function(i){if("hide"==i){var a=t.innerWidth;if(!a){var o=n.documentElement.getBoundingClientRect();a=o.right-Math.abs(o.left)}if(n.body.clientWidth0&&e("body").addClass("hidden-scroll").css({"padding-right":l+r})}}else e("body").removeClass("hidden-scroll").css({"padding-right":e("body").data("padding")})};return C(),d.on("click."+p,function(t){if(E(this)){if(t.preventDefault(),v)return!1;T(e(this))}}),e(n).click(function(t){l&&i.docClose&&0==e(t.target).closest(".sl-image").length&&0==e(t.target).closest(".sl-navigation").length&&O()}),i.disableRightClick&&e(n).on("contextmenu",".sl-image img",function(e){return!1}),i.enableKeyboard&&e(n).on("keyup."+p,function(e){if(e.preventDefault(),a=0,l){var t=e.keyCode;27==t&&O(),(37==t||39==e.keyCode)&&R(39==e.keyCode?1:-1)}}),this.open=function(t){t=t||e(this[0]),T(t)},this.next=function(){R(1)},this.prev=function(){R(-1)},this.close=function(){O()},this.destroy=function(){e(n).unbind("click."+p).unbind("keyup."+p),O(),e(".sl-overlay, .sl-wrapper").remove()},this}}(jQuery,window,document); \ No newline at end of file +!function(e,t,n,i){"use strict";e.fn.simpleLightbox=function(i){var i=e.extend({overlay:!0,spinner:!0,nav:!0,navText:["‹","›"],captions:!0,captionDelay:0,captionSelector:"img",captionType:"attr",captionsData:"title",captionPosition:"bottom",close:!0,closeText:"×",showCounter:!0,fileExt:"png|jpg|jpeg|gif",animationSlide:!0,animationSpeed:250,preloading:!0,enableKeyboard:!0,loop:!0,docClose:!0,swipeTolerance:50,className:"simple-lightbox",widthRatio:.8,heightRatio:.9,disableRightClick:!1,disableScroll:!0,alertError:!0,alertErrorMessage:"Image not found, next image will be loaded",additionalHtml:!1},i),a=(t.navigator.pointerEnabled||t.navigator.msPointerEnabled,0),o=e(),s=function(){var e=n.body||n.documentElement,e=e.style;return""==e.WebkitTransition?"-webkit-":""==e.MozTransition?"-moz-":""==e.OTransition?"-o-":""==e.transition?"":!1},l=!1,r=[],d=this,s=s(),c=s!==!1?!0:!1,p="simplelb",h=e("
").addClass("sl-overlay"),g=e(""),m=e("
").addClass("sl-counter").html('/'),v=!1,x=0,b=e("
").addClass("sl-caption pos-"+i.captionPosition),y=e("
").addClass("sl-image"),w=e("
").addClass("sl-wrapper").addClass(i.className),E=function(t){return i.fileExt?"a"==e(t).prop("tagName").toLowerCase()&&new RegExp(".("+i.fileExt+")$","i").test(e(t).attr("href")):!0},C=function(){i.close&&g.appendTo(w),i.showCounter&&d.length>1&&(m.appendTo(w),m.find(".sl-total").text(d.length)),i.nav&&u.appendTo(w),i.spinner&&f.appendTo(w)},T=function(t){t.trigger(e.Event("show.simplelightbox")),i.disableScroll&&P("hide"),w.appendTo("body"),y.appendTo(w),i.overlay&&h.appendTo(e("body")),v=!0,x=d.index(t),o=e("").hide().attr("src",t.attr("href")),-1==r.indexOf(t.attr("href"))&&r.push(t.attr("href")),y.html("").attr("style",""),o.appendTo(y),q(),h.fadeIn("fast"),e(".sl-close").fadeIn("fast"),f.show(),u.fadeIn("fast"),e(".sl-wrapper .sl-counter .sl-current").text(x+1),m.fadeIn("fast"),S(),i.preloading&&M(),setTimeout(function(){t.trigger(e.Event("shown.simplelightbox"))},i.animationSpeed)},S=function(n){if(o.length){var a=new Image,s=e(t).width()*i.widthRatio,p=e(t).height()*i.heightRatio;a.src=o.attr("src"),e(a).bind("error",function(t){return d.eq(x).trigger(e.Event("error.simplelightbox")),v=!1,l=!0,f.hide(),i.alertError?(alert(i.alertErrorMessage),void R(1==n||-1==n?n:1)):void 0}),a.onload=function(){"undefined"!=typeof n&&d.eq(x).trigger(e.Event("changed.simplelightbox")).trigger(e.Event((1===n?"nextDone":"prevDone")+".simplelightbox")),-1==r.indexOf(o.attr("src"))&&r.push(o.attr("src"));var h=a.width,g=a.height;if(h>s||g>p){var u=h/g>s/p?h/s:g/p;h/=u,g/=u}e(".sl-image").css({top:(e(t).height()-g)/2+"px",left:(e(t).width()-h)/2+"px"}),f.hide(),o.css({width:h+"px",height:g+"px"}).fadeIn("fast"),l=!0;var m="self"==i.captionSelector?d.eq(x):d.eq(x).find(i.captionSelector);if("data"==i.captionType)var b=m.data(i.captionsData);else if("text"==i.captionType)var b=m.html();else var b=m.prop(i.captionsData);if(i.loop||(0==x&&e(".sl-prev").hide(),x>=d.length-1&&e(".sl-next").hide(),x>0&&e(".sl-prev").show(),x").html(i.additionalHtml).addClass("sl-additional-html").appendTo(e(".sl-image"))}}},k=function(t){""!=t&&"undefined"!=typeof t&&i.captions&&b.html(t).hide().appendTo(e(".sl-image")).delay(i.captionDelay).fadeIn("fast")},I=function(t,n){var i={};i[s+"transform"]="translateX("+n+")",i[s+"transition"]=s+"transform "+t+"s linear",e(".sl-image").css(i)},q=function(){e(t).on("resize."+p,S),e(n).on("click."+p+" touchstart."+p,".sl-close",function(e){e.preventDefault(),l&&O()}),u.on("click."+p,"button",function(t){t.preventDefault(),a=0,R(e(this).hasClass("sl-next")?1:-1)});var o=0,s=0,r=!1,h=0;y.on("touchstart."+p+" mousedown."+p,function(e){return r?!0:(c&&(h=parseInt(y.css("left"))),r=!0,o=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,!1)}).on("touchmove."+p+" mousemove."+p+" pointermove MSPointerMove",function(e){return r?(e.preventDefault(),s=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,a=o-s,void(i.animationSlide&&(c?I(0,-a+"px"):y.css("left",h-a+"px")))):!0}).on("touchend."+p+" mouseup."+p+" touchcancel."+p+" mouseleave."+p+" pointerup pointercancel MSPointerUp MSPointerCancel",function(e){if(r){r=!1;var t=!0;i.loop||(0==x&&0>a&&(t=!1),x>=d.length-1&&a>0&&(t=!1)),Math.abs(a)>i.swipeTolerance&&t?R(a>0?1:-1):i.animationSlide&&(c?I(i.animationSpeed/1e3,"0px"):y.animate({left:h+"px"},i.animationSpeed/2))}})},D=function(){u.off("click","button"),e(n).off("click."+p,".sl-close"),e(t).off("resize."+p)},M=function(){var t=0>x+1?d.length-1:x+1>=d.length-1?0:x+1,n=0>x-1?d.length-1:x-1>=d.length-1?0:x-1;e("").attr("src",d.eq(t).attr("href")).load(function(){-1==r.indexOf(e(this).attr("src"))&&r.push(e(this).attr("src")),d.eq(x).trigger(e.Event("nextImageLoaded.simplelightbox"))}),e("").attr("src",d.eq(n).attr("href")).load(function(){-1==r.indexOf(e(this).attr("src"))&&r.push(e(this).attr("src")),d.eq(x).trigger(e.Event("prevImageLoaded.simplelightbox"))})},R=function(t){d.eq(x).trigger(e.Event("change.simplelightbox")).trigger(e.Event((1===t?"next":"prev")+".simplelightbox"));var n=x+t;if(!(v||(0>n||n>=d.length)&&0==i.loop)){x=0>n?d.length-1:n>d.length-1?0:n,e(".sl-wrapper .sl-counter .sl-current").text(x+1);var s={opacity:0};i.animationSlide&&(c?I(i.animationSpeed/1e3,-100*t-a+"px"):s.left=parseInt(e(".sl-image").css("left"))+-100*t+"px"),e(".sl-image").animate(s,i.animationSpeed,function(){setTimeout(function(){var n=d.eq(x);o.attr("src",n.attr("href")),-1==r.indexOf(n.attr("href"))&&f.show(),e(".sl-caption").remove(),S(t),i.preloading&&M()},100)})}},O=function(){if(!v){var t=d.eq(x),n=!1;t.trigger(e.Event("close.simplelightbox")),e(".sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter").fadeOut("fast",function(){i.disableScroll&&P("show"),e(".sl-wrapper, .sl-overlay").remove(),D(),n||t.trigger(e.Event("closed.simplelightbox")),n=!0}),o=e(),l=!1,v=!1}},P=function(i){if("hide"==i){var a=t.innerWidth;if(!a){var o=n.documentElement.getBoundingClientRect();a=o.right-Math.abs(o.left)}if(n.body.clientWidth0&&e("body").addClass("hidden-scroll").css({"padding-right":l+r})}}else e("body").removeClass("hidden-scroll").css({"padding-right":e("body").data("padding")})};return C(),d.on("click."+p,function(t){if(E(this)){if(t.preventDefault(),v)return!1;T(e(this))}}),e(n).on("click."+p+" touchstart."+p,function(t){l&&i.docClose&&0==e(t.target).closest(".sl-image").length&&0==e(t.target).closest(".sl-navigation").length&&O()}),i.disableRightClick&&e(n).on("contextmenu",".sl-image img",function(e){return!1}),i.enableKeyboard&&e(n).on("keyup."+p,function(e){if(e.preventDefault(),a=0,l){var t=e.keyCode;27==t&&O(),(37==t||39==e.keyCode)&&R(39==e.keyCode?1:-1)}}),this.open=function(t){t=t||e(this[0]),T(t)},this.next=function(){R(1)},this.prev=function(){R(-1)},this.close=function(){O()},this.destroy=function(){e(n).unbind("click."+p).unbind("keyup."+p),O(),e(".sl-overlay, .sl-wrapper").remove()},this}}(jQuery,window,document); \ No newline at end of file diff --git a/package.json b/package.json index de7c739..0e2d14a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simplelightbox", - "version": "1.8.3", + "version": "1.8.4", "description": "Touch-friendly image lightbox for mobile and desktop with jQuery", "main": "dist/simple-lightbox.js", "repository": {