From 28bca7bb9ad11a88ddc03ad7937dda3d46abe59d Mon Sep 17 00:00:00 2001 From: root Date: Sun, 3 Jan 2016 18:37:39 +0100 Subject: [PATCH] Add support for fading between photos, Bugfix for single image navigation, option for caption delay --- README.md | 3 +++ bower.json | 2 +- dist/simple-lightbox.js | 35 +++++++++++++++++++++++------------ dist/simple-lightbox.min.js | 2 +- package.json | 2 +- 5 files changed, 29 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 4d887bc..4e5cb97 100644 --- a/README.md +++ b/README.md @@ -28,11 +28,13 @@ var lightbox = $('.gallery a').simpleLightbox(options); | captionType | 'attr' | string | how to get the caption. You can choose between attr, data or text | | captionsData | title | string | get the caption from given attribute | | captionPosition | 'bottom' | string | the position of the caption. Options are top, bottom or outside (note that outside can be outside the visible viewport!) | +| captionDelay | 0 | int | adds a delay before the caption shows (in ms) | | close | true | bool | show the close button or not | | closeText | '×' | string | text or html for the close button | | showCounter | true | bool | show current image index or not | | fileExt | 'png|jpg|jpeg|gif' | regexp or false | list of fileextensions the plugin works with or false for disable the check | | animationSpeed | 250 | int | how long takes the slide animation | +| animationSlide | true | bool | weather to slide in new photos or not, disable to fade | | preloading | true | bool | allows preloading next und previous images | | enableKeyboard | true | bool | allow keyboard arrow navigation and close with ESC key | | loop | true | bool | enables looping through images | @@ -83,6 +85,7 @@ var lightbox2 = $('.lighbox-2 a').simpleLightbox(); ``` ### Changelog +**1.7.0 - Add support for fading between photos, Bugfix for single image navigation, option for caption delay** **1.6.0 - Option for caption position. Disable prev or next arrow if loop is false and position is first or last.** **1.5.1 - Bugfix for multiple lightboxes on one page** **1.5.0 - Added options for disabling rightclick and scrolling, changed default prev- and next-button text** diff --git a/bower.json b/bower.json index 2651dad..20d6f00 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "simplelightbox", - "version": "1.6.0", + "version": "1.7.0", "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 8137c3b..4dc34ac 100644 --- a/dist/simple-lightbox.js +++ b/dist/simple-lightbox.js @@ -17,6 +17,7 @@ $.fn.simpleLightbox = function( options ) nav: true, navText: ['‹','›'], captions: true, + captionDelay: 0, captionSelector: 'img', captionType: 'attr', captionsData: 'title', @@ -25,6 +26,7 @@ $.fn.simpleLightbox = function( options ) closeText: '×', showCounter: true, fileExt: 'png|jpg|jpeg|gif', + animationSlide: true, animationSpeed: 250, preloading: true, enableKeyboard: true, @@ -167,15 +169,20 @@ $.fn.simpleLightbox = function( options ) if(index > 0 && index < $(selector).length -1){ $('.sl-prev, .sl-next').show(); } } + if($(selector).length == 1) $('.sl-prev, .sl-next').hide(); + if(dir == 1 || dir == -1){ var css = { 'opacity': 1.0 }; - if( canTransisions ) { - slide(0, 100 * dir + 'px'); - setTimeout( function(){ slide( options.animationSpeed / 1000, 0 + 'px'), 50 }); - } - else { - css.left = parseInt( $('.sl-image').css( 'left' ) ) + 100 * dir + 'px'; + if( options.animationSlide ) { + if( canTransisions ) { + slide(0, 100 * dir + 'px'); + setTimeout( function(){ slide( options.animationSpeed / 1000, 0 + 'px'), 50 }); + } + else { + css.left = parseInt( $('.sl-image').css( 'left' ) ) + 100 * dir + 'px'; + } } + $('.sl-image').animate( css, options.animationSpeed, function(){ animating = false; setCaption(captionText); @@ -189,7 +196,7 @@ $.fn.simpleLightbox = function( options ) }, setCaption = function(captiontext){ if(captiontext != '' && typeof captiontext !== "undefined" && options.captions){ - caption.html(captiontext).hide().appendTo($('.sl-image')).fadeIn('fast'); + caption.html(captiontext).hide().appendTo($('.sl-image')).delay(options.captionDelay).fadeIn('fast'); } }, slide = function(speed, pos){ @@ -212,8 +219,10 @@ $.fn.simpleLightbox = function( options ) index = (newIndex < 0) ? $(selector).length -1: (newIndex > $(selector).length -1) ? 0 : newIndex; $('.sl-wrapper .sl-counter .sl-current').text(index +1); var css = { 'opacity': 0 }; - if( canTransisions ) slide(options.animationSpeed / 1000, ( -100 * dir ) - swipeDiff + 'px'); - else css.left = parseInt( $('.sl-image').css( 'left' ) ) + -100 * dir + 'px'; + if( options.animationSlide ) { + if( canTransisions ) slide(options.animationSpeed / 1000, ( -100 * dir ) - swipeDiff + 'px'); + else css.left = parseInt( $('.sl-image').css( 'left' ) ) + -100 * dir + 'px'; + } $('.sl-image').animate( css, options.animationSpeed, function(){ setTimeout( function(){ // fadeout old image @@ -348,8 +357,10 @@ $.fn.simpleLightbox = function( options ) e.preventDefault(); swipeEnd = e.originalEvent.pageX || e.originalEvent.touches[ 0 ].pageX; swipeDiff = swipeStart - swipeEnd; - if( canTransisions ) slide( 0, -swipeDiff + 'px' ); - else image.css( 'left', imageLeft - swipeDiff + 'px' ); + if( options.animationSlide ) { + if( canTransisions ) slide( 0, -swipeDiff + 'px' ); + else image.css( 'left', imageLeft - swipeDiff + 'px' ); + } }) .on( 'touchend mouseup touchcancel pointerup pointercancel MSPointerUp MSPointerCancel',function(e) { @@ -358,7 +369,7 @@ $.fn.simpleLightbox = function( options ) if( Math.abs( swipeDiff ) > options.swipeTolerance ) { loadImage( swipeDiff > 0 ? 1 : -1 ); } - else + else if( options.animationSlide ) { if( canTransisions ) slide( options.animationSpeed / 1000, 0 + 'px' ); else image.animate({ 'left': imageLeft + 'px' }, options.animationSpeed / 2 ); diff --git a/dist/simple-lightbox.min.js b/dist/simple-lightbox.min.js index 97fe7db..f9c6aa8 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,captionSelector:"img",captionType:"attr",captionsData:"title",captionPosition:"bottom",close:!0,closeText:"×",showCounter:!0,fileExt:"png|jpg|jpeg|gif",animationSpeed:250,preloading:!0,enableKeyboard:!0,loop:!0,docClose:!0,swipeTolerance:50,className:"simple-lightbox",widthRatio:.8,heightRatio:.9,disableRightClick:!1,disableScroll:!0},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=this.selector,s=s(),c=s!==!1?!0:!1,p="simplelb",d=e("
").addClass("sl-overlay"),h=e(""),u=e("
").addClass("sl-counter").html('/'),m=!1,v=0,b=e(),x=e("
").addClass("sl-caption pos-"+i.captionPosition),y=e("
").addClass("sl-wrapper").addClass(i.className).html('
'),w=function(t){return i.fileExt?"a"==e(t).prop("tagName").toLowerCase()&&new RegExp(".("+i.fileExt+")$","i").test(e(t).attr("href")):!0},T=function(){b=e(".sl-image"),i.close&&h.appendTo(y),i.showCounter&&e(r).length>1&&(u.appendTo(y),u.find(".sl-total").text(e(r).length)),i.nav&&g.appendTo(y),i.spinner&&f.appendTo(y)},C=function(t){t.trigger(e.Event("show.simplelightbox")),i.disableScroll&&M("hide"),y.appendTo("body"),i.overlay&&d.appendTo(e("body")),m=!0,v=e(r).index(t),o=e("").hide().attr("src",t.attr("href")),e(".sl-image").html(""),o.appendTo(e(".sl-image")),d.fadeIn("fast"),e(".sl-close").fadeIn("fast"),f.show(),g.fadeIn("fast"),e(".sl-wrapper .sl-counter .sl-current").text(v+1),u.fadeIn("fast"),S(),i.preloading&&I(),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"),a.onload=function(){var d=a.width,h=a.height;if(d>s||h>p){var g=d/h>s/p?d/s:h/p;d/=g,h/=g}e(".sl-image").css({top:(e(t).height()-h)/2+"px",left:(e(t).width()-d)/2+"px"}),f.hide(),o.css({width:d+"px",height:h+"px"}).fadeIn("fast"),l=!0;var u="self"==i.captionSelector?e(r).eq(v):e(r).eq(v).find(i.captionSelector);if("data"==i.captionType)var b=u.data(i.captionsData);else if("text"==i.captionType)var b=u.html();else var b=u.prop(i.captionsData);if(i.loop||(0==v&&e(".sl-prev").hide(),v>=e(r).length-1&&e(".sl-next").hide(),v>0&&vv+1?e(r).length-1:v+1>=e(r).length-1?0:v+1,n=0>v-1?e(r).length-1:v-1>=e(r).length-1?0:v-1;e("").attr("src",e(r).eq(t).attr("href")).load(),e("").attr("src",e(r).eq(n).attr("href")).load()},D=function(t){f.show();var n=v+t;if(!(m||(0>n||n>=e(r).length)&&0==i.loop)){v=0>n?e(r).length-1:n>e(r).length-1?0:n,e(".sl-wrapper .sl-counter .sl-current").text(v+1);var s={opacity:0};c?k(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=e(r).eq(v);o.attr("src",n.attr("href")),e(".sl-caption").remove(),S(t),i.preloading&&I()},100)})}},q=function(){if(!m){var t=e(r).eq(v),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&&M("show"),e(".sl-wrapper, .sl-overlay").remove(),n||t.trigger(e.Event("closed.simplelightbox")),n=!0}),o=e(),l=!1,m=!1}},M=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").css({"padding-right":l+r,overflow:"hidden"})}}else e("body").css({"padding-right":e("body").data("padding"),overflow:"auto"})};T(),e(t).on("resize",S),e(n).on("click."+p,this.selector,function(t){if(w(this)){if(t.preventDefault(),m)return!1;C(e(this))}}),e(n).on("click",".sl-close",function(e){e.preventDefault(),l&&q()}),e(n).click(function(t){l&&i.docClose&&0==e(t.target).closest(".sl-image").length&&0==e(t.target).closest(".sl-navigation").length&&q()}),i.disableRightClick&&e(n).on("contextmenu",".sl-image img",function(e){return!1}),e(n).on("click",".sl-navigation button",function(t){t.preventDefault(),a=0,D(e(this).hasClass("sl-next")?1:-1)}),i.enableKeyboard&&e(n).on("keyup."+p,function(e){if(e.preventDefault(),a=0,l){var t=e.keyCode;27==t&&q(),(37==t||39==e.keyCode)&&D(39==e.keyCode?1:-1)}});var R=0,P=0,W=!1,X=0;return e(n).on("touchstart mousedown pointerdown MSPointerDown",".sl-image",function(e){return W?!0:(c&&(X=parseInt(b.css("left"))),W=!0,R=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,!1)}).on("touchmove mousemove pointermove MSPointerMove",function(e){return W?(e.preventDefault(),P=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,a=R-P,void(c?k(0,-a+"px"):b.css("left",X-a+"px"))):!0}).on("touchend mouseup touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",function(e){W&&(W=!1,Math.abs(a)>i.swipeTolerance?D(a>0?1:-1):c?k(i.animationSpeed/1e3,"0px"):b.animate({left:X+"px"},i.animationSpeed/2))}),this.open=function(e){C(e)},this.next=function(){D(1)},this.prev=function(){D(-1)},this.close=function(){q()},this.destroy=function(){e(n).unbind("click."+p).unbind("keyup."+p),q(),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},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=this.selector,s=s(),c=s!==!1?!0:!1,d="simplelb",p=e("
").addClass("sl-overlay"),h=e(""),u=e("
").addClass("sl-counter").html('/'),m=!1,v=0,b=e(),x=e("
").addClass("sl-caption pos-"+i.captionPosition),y=e("
").addClass("sl-wrapper").addClass(i.className).html('
'),w=function(t){return i.fileExt?"a"==e(t).prop("tagName").toLowerCase()&&new RegExp(".("+i.fileExt+")$","i").test(e(t).attr("href")):!0},T=function(){b=e(".sl-image"),i.close&&h.appendTo(y),i.showCounter&&e(r).length>1&&(u.appendTo(y),u.find(".sl-total").text(e(r).length)),i.nav&&g.appendTo(y),i.spinner&&f.appendTo(y)},S=function(t){t.trigger(e.Event("show.simplelightbox")),i.disableScroll&&M("hide"),y.appendTo("body"),i.overlay&&p.appendTo(e("body")),m=!0,v=e(r).index(t),o=e("").hide().attr("src",t.attr("href")),e(".sl-image").html(""),o.appendTo(e(".sl-image")),p.fadeIn("fast"),e(".sl-close").fadeIn("fast"),f.show(),g.fadeIn("fast"),e(".sl-wrapper .sl-counter .sl-current").text(v+1),u.fadeIn("fast"),C(),i.preloading&&D(),setTimeout(function(){t.trigger(e.Event("shown.simplelightbox"))},i.animationSpeed)},C=function(n){if(o.length){var a=new Image,s=e(t).width()*i.widthRatio,d=e(t).height()*i.heightRatio;a.src=o.attr("src"),a.onload=function(){var p=a.width,h=a.height;if(p>s||h>d){var g=p/h>s/d?p/s:h/d;p/=g,h/=g}e(".sl-image").css({top:(e(t).height()-h)/2+"px",left:(e(t).width()-p)/2+"px"}),f.hide(),o.css({width:p+"px",height:h+"px"}).fadeIn("fast"),l=!0;var u="self"==i.captionSelector?e(r).eq(v):e(r).eq(v).find(i.captionSelector);if("data"==i.captionType)var b=u.data(i.captionsData);else if("text"==i.captionType)var b=u.html();else var b=u.prop(i.captionsData);if(i.loop||(0==v&&e(".sl-prev").hide(),v>=e(r).length-1&&e(".sl-next").hide(),v>0&&vv+1?e(r).length-1:v+1>=e(r).length-1?0:v+1,n=0>v-1?e(r).length-1:v-1>=e(r).length-1?0:v-1;e("").attr("src",e(r).eq(t).attr("href")).load(),e("").attr("src",e(r).eq(n).attr("href")).load()},I=function(t){f.show();var n=v+t;if(!(m||(0>n||n>=e(r).length)&&0==i.loop)){v=0>n?e(r).length-1:n>e(r).length-1?0:n,e(".sl-wrapper .sl-counter .sl-current").text(v+1);var s={opacity:0};i.animationSlide&&(c?k(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=e(r).eq(v);o.attr("src",n.attr("href")),e(".sl-caption").remove(),C(t),i.preloading&&D()},100)})}},q=function(){if(!m){var t=e(r).eq(v),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&&M("show"),e(".sl-wrapper, .sl-overlay").remove(),n||t.trigger(e.Event("closed.simplelightbox")),n=!0}),o=e(),l=!1,m=!1}},M=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").css({"padding-right":l+r,overflow:"hidden"})}}else e("body").css({"padding-right":e("body").data("padding"),overflow:"auto"})};T(),e(t).on("resize",C),e(n).on("click."+d,this.selector,function(t){if(w(this)){if(t.preventDefault(),m)return!1;S(e(this))}}),e(n).on("click",".sl-close",function(e){e.preventDefault(),l&&q()}),e(n).click(function(t){l&&i.docClose&&0==e(t.target).closest(".sl-image").length&&0==e(t.target).closest(".sl-navigation").length&&q()}),i.disableRightClick&&e(n).on("contextmenu",".sl-image img",function(e){return!1}),e(n).on("click",".sl-navigation button",function(t){t.preventDefault(),a=0,I(e(this).hasClass("sl-next")?1:-1)}),i.enableKeyboard&&e(n).on("keyup."+d,function(e){if(e.preventDefault(),a=0,l){var t=e.keyCode;27==t&&q(),(37==t||39==e.keyCode)&&I(39==e.keyCode?1:-1)}});var R=0,P=0,W=!1,X=0;return e(n).on("touchstart mousedown pointerdown MSPointerDown",".sl-image",function(e){return W?!0:(c&&(X=parseInt(b.css("left"))),W=!0,R=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,!1)}).on("touchmove mousemove pointermove MSPointerMove",function(e){return W?(e.preventDefault(),P=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,a=R-P,void(i.animationSlide&&(c?k(0,-a+"px"):b.css("left",X-a+"px")))):!0}).on("touchend mouseup touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",function(e){W&&(W=!1,Math.abs(a)>i.swipeTolerance?I(a>0?1:-1):i.animationSlide&&(c?k(i.animationSpeed/1e3,"0px"):b.animate({left:X+"px"},i.animationSpeed/2)))}),this.open=function(e){S(e)},this.next=function(){I(1)},this.prev=function(){I(-1)},this.close=function(){q()},this.destroy=function(){e(n).unbind("click."+d).unbind("keyup."+d),q(),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 2f37513..4d3504a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simplelightbox", - "version": "1.6.0", + "version": "1.7.0", "description": "Touch-friendly image lightbox for mobile and desktop with jQuery", "main": "dist/simple-lightbox.js", "repository": {