From d37c983cd5a31f2996051fc2a905c31caa678b2e Mon Sep 17 00:00:00 2001 From: root Date: Thu, 24 Mar 2016 08:26:17 +0100 Subject: [PATCH] Better bugfix for #33, finally fixing multiple lightbox on one page slowness issues --- README.md | 1 + bower.json | 2 +- dist/simple-lightbox.js | 136 +++++++++++++++++++----------------- dist/simple-lightbox.min.js | 2 +- dist/simplelightbox.css | 41 ++++++----- dist/simplelightbox.min.css | 2 +- dist/simplelightbox.scss | 3 + package.json | 2 +- 8 files changed, 104 insertions(+), 85 deletions(-) diff --git a/README.md b/README.md index 5df99ec..5e31cac 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,7 @@ var lightbox2 = $('.lighbox-2 a').simpleLightbox(); ``` ### Changelog +**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** **1.8.0 - New API Events (changed open to show) and little fix in function open() brought by Geoffrey Crofte and some other small bugfixes** **1.7.2 - Bugfix von #25 and #27** diff --git a/bower.json b/bower.json index 3a31759..294450b 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "simplelightbox", - "version": "1.8.1", + "version": "1.8.2", "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 c217cc5..e8a2837 100644 --- a/dist/simple-lightbox.js +++ b/dist/simple-lightbox.js @@ -85,15 +85,14 @@ $.fn.simpleLightbox = function( options ) counter = $('
').addClass('sl-counter').html('/'), animating = false, index = 0, - image = $(), caption = $('
').addClass('sl-caption pos-'+options.captionPosition), - wrapper = $('
').addClass('sl-wrapper').addClass(options.className).html('
'), + image = $('
').addClass('sl-image'), + wrapper = $('
').addClass('sl-wrapper').addClass(options.className), isValidLink = function( element ){ if(!options.fileExt) return true; return $( element ).prop( 'tagName' ).toLowerCase() == 'a' && ( new RegExp( '\.(' + options.fileExt + ')$', 'i' ) ).test( $( element ).attr( 'href' ) ); }, setup = function(){ - image = $('.sl-image'); if(options.close) closeBtn.appendTo(wrapper); if(options.showCounter){ if(objects.length > 1){ @@ -109,6 +108,7 @@ $.fn.simpleLightbox = function( options ) elem.trigger($.Event('show.simplelightbox')); if(options.disableScroll) handleScrollbar('hide'); wrapper.appendTo('body'); + image.appendTo(wrapper); if(options.overlay) overlay.appendTo($('body')); animating = true; index = objects.index(elem); @@ -118,8 +118,9 @@ $.fn.simpleLightbox = function( options ) if(loaded.indexOf(elem.attr('href')) == -1){ loaded.push(elem.attr('href')); } - $('.sl-image').html('').attr('style',''); - curImg.appendTo($('.sl-image')); + image.html('').attr('style',''); + curImg.appendTo(image); + addEvents(); overlay.fadeIn('fast'); $('.sl-close').fadeIn('fast'); spinner.show(); @@ -131,7 +132,6 @@ $.fn.simpleLightbox = function( options ) setTimeout( function(){ elem.trigger($.Event('shown.simplelightbox')); } ,options.animationSpeed); }, adjustImage = function(dir){ - if(!curImg.length) return; var tmpImage = new Image(), windowWidth = $( window ).width() * options.widthRatio, @@ -237,6 +237,69 @@ $.fn.simpleLightbox = function( options ) styles[transPrefix + 'transition'] = transPrefix + 'transform ' + speed + 's linear'; $('.sl-image').css(styles); }, + addEvents = function(){ + // resize/responsive + $( window ).on( 'resize.'+prefix, adjustImage ); + + // close lightbox on close btn + $( document ).on('click.'+prefix, '.sl-close', function(e){ + e.preventDefault(); + if(opened){ close();} + }); + + // nav-buttons + nav.on('click.'+prefix, 'button', function(e){ + e.preventDefault(); + swipeDiff = 0; + loadImage( $(this).hasClass('sl-next') ? 1 : -1 ); + }); + + // touchcontrols + var swipeStart = 0, + swipeEnd = 0, + mousedown = false, + imageLeft = 0; + + image + .on( 'touchstart.'+prefix+' mousedown.'+prefix, function(e) + { + if(mousedown) return true; + if( canTransisions ) imageLeft = parseInt( image.css( 'left' ) ); + mousedown = true; + swipeStart = e.originalEvent.pageX || e.originalEvent.touches[ 0 ].pageX; + return false; + }) + .on( 'touchmove.'+prefix+' mousemove.'+prefix+' pointermove MSPointerMove', function(e) + { + if(!mousedown) return true; + e.preventDefault(); + swipeEnd = e.originalEvent.pageX || e.originalEvent.touches[ 0 ].pageX; + swipeDiff = swipeStart - swipeEnd; + if( options.animationSlide ) { + if( canTransisions ) slide( 0, -swipeDiff + 'px' ); + else image.css( 'left', imageLeft - swipeDiff + 'px' ); + } + }) + .on( 'touchend.'+prefix+' mouseup.'+prefix+' touchcancel.'+prefix+' mouseleave.'+prefix+' pointerup pointercancel MSPointerUp MSPointerCancel',function(e) + { + if(mousedown){ + mousedown = false; + if( Math.abs( swipeDiff ) > options.swipeTolerance ) { + loadImage( swipeDiff > 0 ? 1 : -1 ); + } + else if( options.animationSlide ) + { + if( canTransisions ) slide( options.animationSpeed / 1000, 0 + 'px' ); + else image.animate({ 'left': imageLeft + 'px' }, options.animationSpeed / 2 ); + } + } + }); + }, + removeEvents = function(){ + nav.off('click', 'button'); + $( document ).off('click.'+prefix, '.sl-close'); + $( window ).off( 'resize.'+prefix); + }, preload = function(){ var next = (index+1 < 0) ? objects.length -1: (index+1 >= objects.length -1) ? 0 : index+1, prev = (index-1 < 0) ? objects.length -1: (index-1 >= objects.length -1) ? 0 : index-1; @@ -292,6 +355,7 @@ $.fn.simpleLightbox = function( options ) $('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter').fadeOut('fast', function(){ if(options.disableScroll) handleScrollbar('show'); $('.sl-wrapper, .sl-overlay').remove(); + removeEvents(); if(!triggered) elem.trigger($.Event('closed.simplelightbox')); triggered = true; }); @@ -315,19 +379,18 @@ $.fn.simpleLightbox = function( options ) $(document.body)[0].removeChild(scrollDiv); $('body').data('padding',padding); if(scrollbarWidth > 0){ - $('body').css({'padding-right':padding+scrollbarWidth, 'overflow':'hidden'}); + $('body').addClass('hidden-scroll').css({'padding-right':padding+scrollbarWidth}); } } } else { - $('body').css({'padding-right':$('body').data('padding'), 'overflow':'visible'}); + $('body').removeClass('hidden-scroll').css({'padding-right':$('body').data('padding')}); } } // events setup(); - // resize/responsive - $( window ).on( 'resize', adjustImage ); + // open lightbox objects.on( 'click.'+prefix, function( e ){ @@ -338,12 +401,6 @@ $.fn.simpleLightbox = function( options ) } }); - // close lightbox on close btn - $( document ).on('click', '.sl-close', function(e){ - e.preventDefault(); - if(opened){ close();} - }); - // close on click on doc $( document ).click(function(e){ if(opened){ @@ -360,12 +417,6 @@ $.fn.simpleLightbox = function( options ) }); } - // nav-buttons - $(document).on('click', '.sl-navigation button', function(e){ - e.preventDefault(); - swipeDiff = 0; - loadImage( $(this).hasClass('sl-next') ? 1 : -1 ); - }); // keyboard-control if( options.enableKeyboard ){ @@ -385,47 +436,6 @@ $.fn.simpleLightbox = function( options ) }); } - // touchcontrols - var swipeStart = 0, - swipeEnd = 0, - mousedown = false, - imageLeft = 0; - - $( document ) - .on( 'touchstart mousedown pointerdown MSPointerDown', '.sl-image', function(e) - { - if(mousedown) return true; - if( canTransisions ) imageLeft = parseInt( image.css( 'left' ) ); - mousedown = true; - swipeStart = e.originalEvent.pageX || e.originalEvent.touches[ 0 ].pageX; - return false; - }) - .on( 'touchmove mousemove pointermove MSPointerMove', function(e) - { - if(!mousedown) return true; - e.preventDefault(); - swipeEnd = e.originalEvent.pageX || e.originalEvent.touches[ 0 ].pageX; - swipeDiff = swipeStart - swipeEnd; - 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) - { - if(mousedown){ - mousedown = false; - if( Math.abs( swipeDiff ) > options.swipeTolerance ) { - loadImage( swipeDiff > 0 ? 1 : -1 ); - } - else if( options.animationSlide ) - { - if( canTransisions ) slide( options.animationSpeed / 1000, 0 + 'px' ); - else image.animate({ 'left': imageLeft + 'px' }, options.animationSpeed / 2 ); - } - } - }); - // Public methods this.open = function(elem){ elem = elem || $(this[0]); diff --git a/dist/simple-lightbox.min.js b/dist/simple-lightbox.min.js index a4a0962..aca14e0 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(),p=s!==!1?!0:!1,c="simplelb",g=e("
").addClass("sl-overlay"),h=e(""),m=e("
").addClass("sl-counter").html('/'),v=!1,x=0,b=e(),y=e("
").addClass("sl-caption pos-"+i.captionPosition),w=e("
").addClass("sl-wrapper").addClass(i.className).html('
'),E=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(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)},S=function(t){t.trigger(e.Event("show.simplelightbox")),i.disableScroll&&R("hide"),w.appendTo("body"),i.overlay&&g.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")),e(".sl-image").html("").attr("style",""),o.appendTo(e(".sl-image")),g.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"),C(),i.preloading&&q(),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,c=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 D(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 g=a.width,h=a.height;if(g>s||h>c){var u=g/h>s/c?g/s:h/c;g/=u,h/=u}e(".sl-image").css({top:(e(t).height()-h)/2+"px",left:(e(t).width()-g)/2+"px"}),f.hide(),o.css({width:g+"px",height:h+"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&&xx+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"))})},D=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&&(p?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(),C(t),i.preloading&&q()},100)})}},M=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&&R("show"),e(".sl-wrapper, .sl-overlay").remove(),n||t.trigger(e.Event("closed.simplelightbox")),n=!0}),o=e(),l=!1,v=!1}},R=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:"visible"})};T(),e(t).on("resize",C),d.on("click."+c,function(t){if(E(this)){if(t.preventDefault(),v)return!1;S(e(this))}}),e(n).on("click",".sl-close",function(e){e.preventDefault(),l&&M()}),e(n).click(function(t){l&&i.docClose&&0==e(t.target).closest(".sl-image").length&&0==e(t.target).closest(".sl-navigation").length&&M()}),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."+c,function(e){if(e.preventDefault(),a=0,l){var t=e.keyCode;27==t&&M(),(37==t||39==e.keyCode)&&D(39==e.keyCode?1:-1)}});var O=0,P=0,W=!1,X=0;return e(n).on("touchstart mousedown pointerdown MSPointerDown",".sl-image",function(e){return W?!0:(p&&(X=parseInt(b.css("left"))),W=!0,O=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=O-P,void(i.animationSlide&&(p?I(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):i.animationSlide&&(p?I(i.animationSpeed/1e3,"0px"):b.animate({left:X+"px"},i.animationSpeed/2)))}),this.open=function(t){t=t||e(this[0]),S(t)},this.next=function(){D(1)},this.prev=function(){D(-1)},this.close=function(){M()},this.destroy=function(){e(n).unbind("click."+c).unbind("keyup."+c),M(),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"},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&&xi.swipeTolerance?R(a>0?1:-1):i.animationSlide&&(c?I(i.animationSpeed/1e3,"0px"):y.animate({left:d+"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 diff --git a/dist/simplelightbox.css b/dist/simplelightbox.css index 86a7b84..edf514d 100644 --- a/dist/simplelightbox.css +++ b/dist/simplelightbox.css @@ -1,4 +1,9 @@ /* line 1, ../sass/simplelightbox.scss */ +body.hidden-scroll { + overflow: hidden; +} + +/* line 4, ../sass/simplelightbox.scss */ .sl-overlay { position: fixed; left: 0; @@ -11,11 +16,11 @@ z-index: 1006; } -/* line 12, ../sass/simplelightbox.scss */ +/* line 15, ../sass/simplelightbox.scss */ .sl-wrapper { z-index: 1000; } -/* line 14, ../sass/simplelightbox.scss */ +/* line 17, ../sass/simplelightbox.scss */ .sl-wrapper button { border: 0 none; background: transparent; @@ -23,11 +28,11 @@ padding: 0; cursor: pointer; } -/* line 20, ../sass/simplelightbox.scss */ +/* line 23, ../sass/simplelightbox.scss */ .sl-wrapper button:hover { opacity: 0.7; } -/* line 25, ../sass/simplelightbox.scss */ +/* line 28, ../sass/simplelightbox.scss */ .sl-wrapper .sl-close { display: none; position: fixed; @@ -35,7 +40,7 @@ top: 30px; z-index: 1015; } -/* line 33, ../sass/simplelightbox.scss */ +/* line 36, ../sass/simplelightbox.scss */ .sl-wrapper .sl-counter { display: none; position: fixed; @@ -43,12 +48,12 @@ left: 30px; z-index: 1015; } -/* line 41, ../sass/simplelightbox.scss */ +/* line 44, ../sass/simplelightbox.scss */ .sl-wrapper .sl-navigation { width: 100%; display: none; } -/* line 44, ../sass/simplelightbox.scss */ +/* line 47, ../sass/simplelightbox.scss */ .sl-wrapper .sl-navigation button { position: fixed; top: 50%; @@ -61,33 +66,33 @@ z-index: 1015; font-family: arial sans-serif; } -/* line 55, ../sass/simplelightbox.scss */ +/* line 58, ../sass/simplelightbox.scss */ .sl-wrapper .sl-navigation button.sl-next { right: 40px; } -/* line 59, ../sass/simplelightbox.scss */ +/* line 62, ../sass/simplelightbox.scss */ .sl-wrapper .sl-navigation button.sl-prev { left: 40px; } -/* line 65, ../sass/simplelightbox.scss */ +/* line 68, ../sass/simplelightbox.scss */ .sl-wrapper .sl-image { position: fixed; -ms-touch-action: none; touch-action: none; z-index: 10000; } -/* line 70, ../sass/simplelightbox.scss */ +/* line 73, ../sass/simplelightbox.scss */ .sl-wrapper .sl-image img { margin: 0; padding: 0; display: block; } -/* line 75, ../sass/simplelightbox.scss */ +/* line 78, ../sass/simplelightbox.scss */ .sl-wrapper .sl-image iframe { border: 0 none; background: #000; } -/* line 79, ../sass/simplelightbox.scss */ +/* line 82, ../sass/simplelightbox.scss */ .sl-wrapper .sl-image .sl-caption { display: none; padding: 10px; @@ -99,16 +104,16 @@ left: 0; right: 0; } -/* line 90, ../sass/simplelightbox.scss */ +/* line 93, ../sass/simplelightbox.scss */ .sl-wrapper .sl-image .sl-caption.pos-top { bottom: auto; top: 0; } -/* line 95, ../sass/simplelightbox.scss */ +/* line 98, ../sass/simplelightbox.scss */ .sl-wrapper .sl-image .sl-caption.pos-outside { bottom: auto; } -/* line 100, ../sass/simplelightbox.scss */ +/* line 103, ../sass/simplelightbox.scss */ .sl-wrapper .sl-image .sl-download { display: none; position: absolute; @@ -118,7 +123,7 @@ z-index: 1005; } -/* line 111, ../sass/simplelightbox.scss */ +/* line 114, ../sass/simplelightbox.scss */ .sl-spinner { display: none; border: 5px solid #333; @@ -138,7 +143,7 @@ animation: pulsate 1s ease-out infinite; } -/* line 130, ../sass/simplelightbox.scss */ +/* line 133, ../sass/simplelightbox.scss */ .sl-scrollbar-measure { position: absolute; top: -9999px; diff --git a/dist/simplelightbox.min.css b/dist/simplelightbox.min.css index 8b93536..36e1e7d 100644 --- a/dist/simplelightbox.min.css +++ b/dist/simplelightbox.min.css @@ -1 +1 @@ -.sl-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;opacity:.7;display:none;z-index:1006}.sl-wrapper{z-index:1000}.sl-wrapper button{border:0;background:0 0;font-size:24px;padding:0;cursor:pointer}.sl-wrapper button:hover{opacity:.7}.sl-wrapper .sl-close{display:none;position:fixed;right:30px;top:30px;z-index:1015}.sl-wrapper .sl-counter{display:none;position:fixed;top:30px;left:30px;z-index:1015}.sl-wrapper .sl-navigation{width:100%;display:none}.sl-wrapper .sl-navigation button{position:fixed;top:50%;margin-top:-10px;height:30px;width:30px;line-height:30px;text-align:center;display:block;z-index:1015;font-family:arial sans-serif}.sl-wrapper .sl-navigation button.sl-next{right:40px}.sl-wrapper .sl-navigation button.sl-prev{left:40px}.sl-wrapper .sl-image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:10000}.sl-wrapper .sl-image img{margin:0;padding:0;display:block}.sl-wrapper .sl-image iframe{border:0;background:#000}.sl-wrapper .sl-image .sl-caption{display:none;padding:10px;color:#fff;background:#000;opacity:.8;position:absolute;bottom:0;left:0;right:0}.sl-wrapper .sl-image .sl-caption.pos-top{bottom:auto;top:0}.sl-wrapper .sl-image .sl-caption.pos-outside{bottom:auto}.sl-wrapper .sl-image .sl-download{display:none;position:absolute;bottom:5px;right:5px;color:#fff;z-index:1005}.sl-spinner{display:none;border:5px solid #333;border-radius:40px;height:40px;left:50%;margin:-20px 0 0 -20px;opacity:0;position:fixed;top:50%;width:40px;z-index:1007;-webkit-animation:pulsate 1s ease-out infinite;-moz-animation:pulsate 1s ease-out infinite;-ms-animation:pulsate 1s ease-out infinite;-o-animation:pulsate 1s ease-out infinite;animation:pulsate 1s ease-out infinite}.sl-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@-webkit-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-moz-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-o-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-ms-keyframes pulsate{0%,100%{opacity:0}0%{transform:scale(.1)}50%{opacity:1}100%{transform:scale(1.2)}} \ No newline at end of file +body.hidden-scroll{overflow:hidden}.sl-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;opacity:.7;display:none;z-index:1006}.sl-wrapper{z-index:1000}.sl-wrapper button{border:0;background:0 0;font-size:24px;padding:0;cursor:pointer}.sl-wrapper button:hover{opacity:.7}.sl-wrapper .sl-close{display:none;position:fixed;right:30px;top:30px;z-index:1015}.sl-wrapper .sl-counter{display:none;position:fixed;top:30px;left:30px;z-index:1015}.sl-wrapper .sl-navigation{width:100%;display:none}.sl-wrapper .sl-navigation button{position:fixed;top:50%;margin-top:-10px;height:30px;width:30px;line-height:30px;text-align:center;display:block;z-index:1015;font-family:arial sans-serif}.sl-wrapper .sl-navigation button.sl-next{right:40px}.sl-wrapper .sl-navigation button.sl-prev{left:40px}.sl-wrapper .sl-image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:10000}.sl-wrapper .sl-image img{margin:0;padding:0;display:block}.sl-wrapper .sl-image iframe{border:0;background:#000}.sl-wrapper .sl-image .sl-caption{display:none;padding:10px;color:#fff;background:#000;opacity:.8;position:absolute;bottom:0;left:0;right:0}.sl-wrapper .sl-image .sl-caption.pos-top{bottom:auto;top:0}.sl-wrapper .sl-image .sl-caption.pos-outside{bottom:auto}.sl-wrapper .sl-image .sl-download{display:none;position:absolute;bottom:5px;right:5px;color:#fff;z-index:1005}.sl-spinner{display:none;border:5px solid #333;border-radius:40px;height:40px;left:50%;margin:-20px 0 0 -20px;opacity:0;position:fixed;top:50%;width:40px;z-index:1007;-webkit-animation:pulsate 1s ease-out infinite;-moz-animation:pulsate 1s ease-out infinite;-ms-animation:pulsate 1s ease-out infinite;-o-animation:pulsate 1s ease-out infinite;animation:pulsate 1s ease-out infinite}.sl-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@-webkit-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-moz-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-o-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-ms-keyframes pulsate{0%,100%{opacity:0}0%{transform:scale(.1)}50%{opacity:1}100%{transform:scale(1.2)}} \ No newline at end of file diff --git a/dist/simplelightbox.scss b/dist/simplelightbox.scss index 44164b0..f5ec8cc 100644 --- a/dist/simplelightbox.scss +++ b/dist/simplelightbox.scss @@ -1,3 +1,6 @@ +body.hidden-scroll { + overflow: hidden; +} .sl-overlay { position: fixed; left: 0; diff --git a/package.json b/package.json index ef22ec3..8251aa9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simplelightbox", - "version": "1.8.1", + "version": "1.8.2", "description": "Touch-friendly image lightbox for mobile and desktop with jQuery", "main": "dist/simple-lightbox.js", "repository": {