diff --git a/README.md b/README.md index c9d973f..e353639 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,8 @@ var lightbox = $('.gallery a').simpleLightbox(options); | className: | 'simple-lightbox' | string | adds a class to the wrapper of the lightbox | | widthRatio: | 0.8 | float | Ratio of image width to screen width | | heightRatio: | 0.9 | float | Ratio of image height to screen height | +| disableRightClick | false | bool | disable rightclick on image or not | +| disableScroll | true | bool | stop scrolling page if lightbox is openend | ###Events | Name | Description | @@ -72,6 +74,7 @@ var gallery = $('.gallery a').simpleLightbox(); gallery.next(); // Next Image ``` ### Changelog +**1.5.0 - Added options for disabling rightclick and scrolling, changed default prev- and next-button text** **1.4.6 - Option for fileExt can now be false to enable pictures like example.com/pic/200/100** **1.4.5 - Bugfix lightbox opening does not work on mobile devices** **1.4.4 - Bugfix no drag&drop in FF, changed default close text, only output data if lightbox is opened** diff --git a/bower.json b/bower.json index f21d60d..0a9c5f0 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "simplelightbox", - "version": "1.4.6", + "version": "1.5.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 fe647f2..cea1db2 100644 --- a/dist/simple-lightbox.js +++ b/dist/simple-lightbox.js @@ -1,358 +1,389 @@ - -/* - By André Rinas, www.andreknieriem.de - Available for use under the MIT License -*/ - -;( function( $, window, document, undefined ) -{ - 'use strict'; - -$.fn.simpleLightbox = function( options ) -{ - - var options = $.extend({ - overlay: true, - spinner: true, - nav: true, - navText: ['←','→'], - captions: true, - captionSelector:'img', - captionType: 'attr', - captionsData: 'title', - close: true, - closeText: '×', - showCounter: true, - fileExt: 'png|jpg|jpeg|gif', - animationSpeed: 250, - preloading: true, - enableKeyboard: true, - loop: true, - docClose: true, - swipeTolerance: 50, - className: 'simple-lightbox', - widthRatio: 0.8, - heightRatio: 0.9 - - }, options ); - - // global variables - var touchDevice = ( 'ontouchstart' in window ), - pointerEnabled = window.navigator.pointerEnabled || window.navigator.msPointerEnabled, - touched = function( event ){ - if( touchDevice ) return true; - - if( !pointerEnabled || typeof event === 'undefined' || typeof event.pointerType === 'undefined' ) - return false; - - if( typeof event.MSPOINTER_TYPE_MOUSE !== 'undefined' ) - { - if( event.MSPOINTER_TYPE_MOUSE != event.pointerType ) - return true; - } - else - if( event.pointerType != 'mouse' ) - return true; - - return false; - }, - swipeDiff = 0, - curImg = $(), - transPrefix = function(){ - var s = document.body || document.documentElement, s = s.style; - if( s.WebkitTransition == '' ) return '-webkit-'; - if( s.MozTransition == '' ) return '-moz-'; - if( s.OTransition == '' ) return '-o-'; - if( s.transition == '' ) return ''; - return false; - }, - opened = false, - - selector = this.selector, - transPrefix = transPrefix(), - canTransisions = (transPrefix !== false) ? true : false, - prefix = 'simplelb', - overlay = $('
').addClass('sl-overlay'), - closeBtn = $(''), - counter = $('
').addClass('sl-counter').html('/'), - animating = false, - index = 0, - image = $(), - caption = $('
').addClass('sl-caption'), - wrapper = $('
').addClass('sl-wrapper').addClass(options.className).html('
'), - 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($(selector).length > 1){ - counter.appendTo(wrapper); - counter.find('.sl-total').text($(selector).length); - } - - } - if(options.nav) nav.appendTo(wrapper); - if(options.spinner) spinner.appendTo(wrapper); - }, - openImage = function(elem){ - elem.trigger($.Event('show.simplelightbox')); - wrapper.appendTo('body'); - if(options.overlay) overlay.appendTo($('body')); - animating = true; - index = $(selector).index(elem); - curImg = $( '' ) - .hide() - .attr('src', elem.attr('href')); - $('.sl-image').html(''); - curImg.appendTo($('.sl-image')); - overlay.fadeIn('fast'); - $('.sl-close').fadeIn('fast'); - spinner.show(); - nav.fadeIn('fast'); - $('.sl-wrapper .sl-counter .sl-current').text(index +1); - counter.fadeIn('fast'); - adjustImage(); - if(options.preloading){ - preload(); - } - 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, - windowHeight = $( window ).height() * options.heightRatio; - tmpImage.src = curImg.attr( 'src' ); - - tmpImage.onload = function() { - var imageWidth = tmpImage.width, - imageHeight = tmpImage.height; - - if( imageWidth > windowWidth || imageHeight > windowHeight ){ - var ratio = imageWidth / imageHeight > windowWidth / windowHeight ? imageWidth / windowWidth : imageHeight / windowHeight; - imageWidth /= ratio; - imageHeight /= ratio; - } - - $('.sl-image').css({ - 'top': ( $( window ).height() - imageHeight ) / 2 + 'px', - 'left': ( $( window ).width() - imageWidth ) / 2 + 'px' - }); - spinner.hide(); - curImg - .css({ - 'width': imageWidth + 'px', - 'height': imageHeight + 'px' - }) - .fadeIn('fast'); - opened = true; - var cSel = (options.captionSelector == 'self') ? $(selector).eq(index) : $(selector).eq(index).find(options.captionSelector); - if(options.captionType == 'data'){ - var captionText = cSel.data(options.captionsData); - } else if(options.captionType == 'text'){ - var captionText = cSel.html(); - } else { - var captionText = cSel.prop(options.captionsData); - } - - 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'; - } - $('.sl-image').animate( css, options.animationSpeed, function(){ - animating = false; - setCaption(captionText); - }); - - } else { - animating = false; - setCaption(captionText); - } - } - }, - setCaption = function(captiontext){ - if(captiontext != '' && typeof captiontext !== "undefined" && options.captions){ - caption.html(captiontext).hide().appendTo($('.sl-image')).fadeIn('fast'); - } - }, - slide = function(speed, pos){ - var styles = {}; - styles[transPrefix + 'transform'] = 'translateX(' + pos + ')'; - styles[transPrefix + 'transition'] = transPrefix + 'transform ' + speed + 's linear'; - $('.sl-image').css(styles); - }, - preload = function(){ - var next = (index+1 < 0) ? $(selector).length -1: (index+1 >= $(selector).length -1) ? 0 : index+1, - prev = (index-1 < 0) ? $(selector).length -1: (index-1 >= $(selector).length -1) ? 0 : index-1; - $( '' ).attr( 'src', $(selector).eq(next).attr( 'href' ) ).load(); - $( '' ).attr( 'src', $(selector).eq(prev).attr( 'href' ) ).load(); - - }, - loadImage = function(dir){ - spinner.show(); - var newIndex = index + dir; - if(animating || (newIndex < 0 || newIndex >= $(selector).length) && options.loop == false ) return; - animating = true; - 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'; - $('.sl-image').animate( css, options.animationSpeed, function(){ - setTimeout( function(){ - // fadeout old image - var elem = $(selector).eq(index); - curImg - .attr('src', elem.attr('href')); - $('.sl-caption').remove(); - adjustImage(dir); - if(options.preloading) preload(); - }, 100); - }); - }, - close = function(){ - if(animating) return; - var elem = $(selector).eq(index), - triggered = false; - elem.trigger($.Event('close.simplelightbox')); - $('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter').fadeOut('fast', function(){ - $('.sl-wrapper, .sl-overlay').remove(); - if(!triggered) elem.trigger($.Event('closed.simplelightbox')); - triggered = true; - }); - curImg = $(); - opened = false; - } - - // events - setup(); - - // resize/responsive - $( window ).on( 'resize', adjustImage ); - - // open lightbox - $( document ).on( 'click.'+prefix, this.selector, function( e ){ - if(isValidLink(this)){ - e.preventDefault(); - if(animating) return false; - openImage($(this)); - } - }); - - // 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){ - if((options.docClose && $(e.target).closest('.sl-image').length == 0 && $(e.target).closest('.sl-navigation').length == 0) - ){ - close(); - } - } - }); - - // 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 ){ - $( document ).on( 'keyup.'+prefix, function( e ){ - e.preventDefault(); - swipeDiff = 0; - // keyboard control only if lightbox is open - if(opened){ - var key = e.keyCode; - if( key == 27 ) { - close(); - } - if( key == 37 || e.keyCode == 39 ) { - loadImage( e.keyCode == 39 ? 1 : -1 ); - } - } - }); - } - - // 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( 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( canTransisions ) slide( options.animationSpeed / 1000, 0 + 'px' ); - else image.animate({ 'left': imageLeft + 'px' }, options.animationSpeed / 2 ); - } - } - }); - - // Public methods - this.open = function(elem){ - openImage(elem); - } - - this.next = function(){ - loadImage( 1 ); - } - - this.prev = function(){ - loadImage( -1 ); - } - - this.close = function(){ - close(); - } - - this.destroy = function(){ - $(document).unbind('click.'+prefix).unbind('keyup.'+prefix); - close(); - $('.sl-overlay, .sl-wrapper').remove(); - } - - return this; - -}; + +/* + By André Rinas, www.andreknieriem.de + Available for use under the MIT License +*/ + +;( function( $, window, document, undefined ) +{ + 'use strict'; + +$.fn.simpleLightbox = function( options ) +{ + + var options = $.extend({ + overlay: true, + spinner: true, + nav: true, + navText: ['‹','›'], + captions: true, + captionSelector: 'img', + captionType: 'attr', + captionsData: 'title', + close: true, + closeText: '×', + showCounter: true, + fileExt: 'png|jpg|jpeg|gif', + animationSpeed: 250, + preloading: true, + enableKeyboard: true, + loop: true, + docClose: true, + swipeTolerance: 50, + className: 'simple-lightbox', + widthRatio: 0.8, + heightRatio: 0.9, + disableRightClick: false, + disableScroll: true + }, options ); + + // global variables + var touchDevice = ( 'ontouchstart' in window ), + pointerEnabled = window.navigator.pointerEnabled || window.navigator.msPointerEnabled, + touched = function( event ){ + if( touchDevice ) return true; + + if( !pointerEnabled || typeof event === 'undefined' || typeof event.pointerType === 'undefined' ) + return false; + + if( typeof event.MSPOINTER_TYPE_MOUSE !== 'undefined' ) + { + if( event.MSPOINTER_TYPE_MOUSE != event.pointerType ) + return true; + } + else + if( event.pointerType != 'mouse' ) + return true; + + return false; + }, + swipeDiff = 0, + curImg = $(), + transPrefix = function(){ + var s = document.body || document.documentElement, s = s.style; + if( s.WebkitTransition == '' ) return '-webkit-'; + if( s.MozTransition == '' ) return '-moz-'; + if( s.OTransition == '' ) return '-o-'; + if( s.transition == '' ) return ''; + return false; + }, + opened = false, + + selector = this.selector, + transPrefix = transPrefix(), + canTransisions = (transPrefix !== false) ? true : false, + prefix = 'simplelb', + overlay = $('
').addClass('sl-overlay'), + closeBtn = $(''), + counter = $('
').addClass('sl-counter').html('/'), + animating = false, + index = 0, + image = $(), + caption = $('
').addClass('sl-caption'), + wrapper = $('
').addClass('sl-wrapper').addClass(options.className).html('
'), + 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($(selector).length > 1){ + counter.appendTo(wrapper); + counter.find('.sl-total').text($(selector).length); + } + + } + if(options.nav) nav.appendTo(wrapper); + if(options.spinner) spinner.appendTo(wrapper); + }, + openImage = function(elem){ + elem.trigger($.Event('show.simplelightbox')); + if(options.disableScroll) handleScrollbar('hide'); + wrapper.appendTo('body'); + if(options.overlay) overlay.appendTo($('body')); + animating = true; + index = $(selector).index(elem); + curImg = $( '' ) + .hide() + .attr('src', elem.attr('href')); + $('.sl-image').html(''); + curImg.appendTo($('.sl-image')); + overlay.fadeIn('fast'); + $('.sl-close').fadeIn('fast'); + spinner.show(); + nav.fadeIn('fast'); + $('.sl-wrapper .sl-counter .sl-current').text(index +1); + counter.fadeIn('fast'); + adjustImage(); + if(options.preloading) preload(); + 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, + windowHeight = $( window ).height() * options.heightRatio; + tmpImage.src = curImg.attr( 'src' ); + + tmpImage.onload = function() { + var imageWidth = tmpImage.width, + imageHeight = tmpImage.height; + + if( imageWidth > windowWidth || imageHeight > windowHeight ){ + var ratio = imageWidth / imageHeight > windowWidth / windowHeight ? imageWidth / windowWidth : imageHeight / windowHeight; + imageWidth /= ratio; + imageHeight /= ratio; + } + + $('.sl-image').css({ + 'top': ( $( window ).height() - imageHeight ) / 2 + 'px', + 'left': ( $( window ).width() - imageWidth ) / 2 + 'px' + }); + spinner.hide(); + curImg + .css({ + 'width': imageWidth + 'px', + 'height': imageHeight + 'px' + }) + .fadeIn('fast'); + opened = true; + var cSel = (options.captionSelector == 'self') ? $(selector).eq(index) : $(selector).eq(index).find(options.captionSelector); + if(options.captionType == 'data'){ + var captionText = cSel.data(options.captionsData); + } else if(options.captionType == 'text'){ + var captionText = cSel.html(); + } else { + var captionText = cSel.prop(options.captionsData); + } + + 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'; + } + $('.sl-image').animate( css, options.animationSpeed, function(){ + animating = false; + setCaption(captionText); + }); + + } else { + animating = false; + setCaption(captionText); + } + } + }, + setCaption = function(captiontext){ + if(captiontext != '' && typeof captiontext !== "undefined" && options.captions){ + caption.html(captiontext).hide().appendTo($('.sl-image')).fadeIn('fast'); + } + }, + slide = function(speed, pos){ + var styles = {}; + styles[transPrefix + 'transform'] = 'translateX(' + pos + ')'; + styles[transPrefix + 'transition'] = transPrefix + 'transform ' + speed + 's linear'; + $('.sl-image').css(styles); + }, + preload = function(){ + var next = (index+1 < 0) ? $(selector).length -1: (index+1 >= $(selector).length -1) ? 0 : index+1, + prev = (index-1 < 0) ? $(selector).length -1: (index-1 >= $(selector).length -1) ? 0 : index-1; + $( '' ).attr( 'src', $(selector).eq(next).attr( 'href' ) ).load(); + $( '' ).attr( 'src', $(selector).eq(prev).attr( 'href' ) ).load(); + + }, + loadImage = function(dir){ + spinner.show(); + var newIndex = index + dir; + if(animating || (newIndex < 0 || newIndex >= $(selector).length) && options.loop == false ) return; + animating = true; + 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'; + $('.sl-image').animate( css, options.animationSpeed, function(){ + setTimeout( function(){ + // fadeout old image + var elem = $(selector).eq(index); + curImg + .attr('src', elem.attr('href')); + $('.sl-caption').remove(); + adjustImage(dir); + if(options.preloading) preload(); + }, 100); + }); + }, + close = function(){ + if(animating) return; + var elem = $(selector).eq(index), + triggered = false; + elem.trigger($.Event('close.simplelightbox')); + $('.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(); + if(!triggered) elem.trigger($.Event('closed.simplelightbox')); + triggered = true; + }); + curImg = $(); + opened = false; + }, + handleScrollbar = function(type){ + if(type == 'hide'){ + var fullWindowWidth = window.innerWidth; + if (!fullWindowWidth) { + var documentElementRect = document.documentElement.getBoundingClientRect() + fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left) + } + if(document.body.clientWidth < fullWindowWidth){ + var scrollDiv = document.createElement('div'), + padding = parseInt($('body').css('padding-right'),10); + scrollDiv.className = 'sl-scrollbar-measure'; + $('body').append(scrollDiv); + var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; + $(document.body)[0].removeChild(scrollDiv); + $('body').data('padding',padding); + console.log(padding, scrollbarWidth); + if(scrollbarWidth > 0){ + $('body').css({'padding-right':padding+scrollbarWidth, 'overflow':'hidden'}); + } + } + } else { + $('body').css({'padding-right':$('body').data('padding'), 'overflow':'auto'}); + } + } + + // events + setup(); + + // resize/responsive + $( window ).on( 'resize', adjustImage ); + + // open lightbox + $( document ).on( 'click.'+prefix, this.selector, function( e ){ + if(isValidLink(this)){ + e.preventDefault(); + if(animating) return false; + openImage($(this)); + } + }); + + // 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){ + if((options.docClose && $(e.target).closest('.sl-image').length == 0 && $(e.target).closest('.sl-navigation').length == 0)){ + close(); + } + } + }); + + // disable rightclick + if(options.disableRightClick){ + $(document).on('contextmenu', '.sl-image img', function(e){ + return false; + }); + } + + // 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 ){ + $( document ).on( 'keyup.'+prefix, function( e ){ + e.preventDefault(); + swipeDiff = 0; + // keyboard control only if lightbox is open + if(opened){ + var key = e.keyCode; + if( key == 27 ) { + close(); + } + if( key == 37 || e.keyCode == 39 ) { + loadImage( e.keyCode == 39 ? 1 : -1 ); + } + } + }); + } + + // 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( 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( canTransisions ) slide( options.animationSpeed / 1000, 0 + 'px' ); + else image.animate({ 'left': imageLeft + 'px' }, options.animationSpeed / 2 ); + } + } + }); + + // Public methods + this.open = function(elem){ + openImage(elem); + } + + this.next = function(){ + loadImage( 1 ); + } + + this.prev = function(){ + loadImage( -1 ); + } + + this.close = function(){ + close(); + } + + this.destroy = function(){ + $(document).unbind('click.'+prefix).unbind('keyup.'+prefix); + close(); + $('.sl-overlay, .sl-wrapper').remove(); + } + + return this; + +}; })( jQuery, window, document ); \ No newline at end of file diff --git a/dist/simple-lightbox.min.js b/dist/simple-lightbox.min.js index 5722533..1e4a920 100644 --- a/dist/simple-lightbox.min.js +++ b/dist/simple-lightbox.min.js @@ -1,5 +1,5 @@ /* - By Andre Rinas, www.andreknieriem.de + By André Rinas, www.andreknieriem.de Available for use under the MIT License */ -!function(e,t,n){"use strict";e.fn.simpleLightbox=function(a){var a=e.extend({overlay:!0,spinner:!0,nav:!0,navText:["←","→"],captions:!0,captionSelector:"img",captionType:"attr",captionsData:"title",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},a),i=(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(),p=s!==!1?!0:!1,c="simplelb",d=e("
").addClass("sl-overlay"),f=e(""),h=e("
").addClass("sl-counter").html('/'),m=!1,v=0,x=e(),w=e("
").addClass("sl-caption"),b=e("
").addClass("sl-wrapper").addClass(a.className).html('
'),y=function(t){return a.fileExt?"a"==e(t).prop("tagName").toLowerCase()&&new RegExp(".("+a.fileExt+")$","i").test(e(t).attr("href")):!0},T=function(){x=e(".sl-image"),a.close&&f.appendTo(b),a.showCounter&&e(r).length>1&&(h.appendTo(b),h.find(".sl-total").text(e(r).length)),a.nav&&g.appendTo(b),a.spinner&&u.appendTo(b)},C=function(t){t.trigger(e.Event("show.simplelightbox")),b.appendTo("body"),a.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"),u.show(),g.fadeIn("fast"),e(".sl-wrapper .sl-counter .sl-current").text(v+1),h.fadeIn("fast"),E(),a.preloading&&I(),setTimeout(function(){t.trigger(e.Event("shown.simplelightbox"))},a.animationSpeed)},E=function(n){if(o.length){var i=new Image,s=e(t).width()*a.widthRatio,c=e(t).height()*a.heightRatio;i.src=o.attr("src"),i.onload=function(){var d=i.width,f=i.height;if(d>s||f>c){var g=d/f>s/c?d/s:f/c;d/=g,f/=g}e(".sl-image").css({top:(e(t).height()-f)/2+"px",left:(e(t).width()-d)/2+"px"}),u.hide(),o.css({width:d+"px",height:f+"px"}).fadeIn("fast"),l=!0;var h="self"==a.captionSelector?e(r).eq(v):e(r).eq(v).find(a.captionSelector);if("data"==a.captionType)var x=h.data(a.captionsData);else if("text"==a.captionType)var x=h.html();else var x=h.prop(a.captionsData);if(1==n||-1==n){var w={opacity:1};p?(k(0,100*n+"px"),setTimeout(function(){k(a.animationSpeed/1e3,"0px"),50})):w.left=parseInt(e(".sl-image").css("left"))+100*n+"px",e(".sl-image").animate(w,a.animationSpeed,function(){m=!1,S(x)})}else m=!1,S(x)}}},S=function(t){""!=t&&"undefined"!=typeof t&&a.captions&&w.html(t).hide().appendTo(e(".sl-image")).fadeIn("fast")},k=function(t,n){var a={};a[s+"transform"]="translateX("+n+")",a[s+"transition"]=s+"transform "+t+"s linear",e(".sl-image").css(a)},I=function(){var t=0>v+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){u.show();var n=v+t;if(!(m||(0>n||n>=e(r).length)&&0==a.loop)){m=!0,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};p?k(a.animationSpeed/1e3,-100*t-i+"px"):s.left=parseInt(e(".sl-image").css("left"))+-100*t+"px",e(".sl-image").animate(s,a.animationSpeed,function(){setTimeout(function(){var n=e(r).eq(v);o.attr("src",n.attr("href")),e(".sl-caption").remove(),E(t),a.preloading&&I()},100)})}},M=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(){e(".sl-wrapper, .sl-overlay").remove(),n||t.trigger(e.Event("closed.simplelightbox")),n=!0}),o=e(),l=!1}};T(),e(t).on("resize",E),e(n).on("click."+c,this.selector,function(t){if(y(this)){if(t.preventDefault(),m)return!1;C(e(this))}}),e(n).on("click",".sl-close",function(e){e.preventDefault(),l&&M()}),e(n).click(function(t){l&&a.docClose&&0==e(t.target).closest(".sl-image").length&&0==e(t.target).closest(".sl-navigation").length&&M()}),e(n).on("click",".sl-navigation button",function(t){t.preventDefault(),i=0,D(e(this).hasClass("sl-next")?1:-1)}),a.enableKeyboard&&e(n).on("keyup."+c,function(e){if(e.preventDefault(),i=0,l){var t=e.keyCode;27==t&&M(),(37==t||39==e.keyCode)&&D(39==e.keyCode?1:-1)}});var q=0,P=0,R=!1,X=0;return e(n).on("touchstart mousedown pointerdown MSPointerDown",".sl-image",function(e){return R?!0:(p&&(X=parseInt(x.css("left"))),R=!0,q=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,!1)}).on("touchmove mousemove pointermove MSPointerMove",function(e){return R?(e.preventDefault(),P=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,i=q-P,void(p?k(0,-i+"px"):x.css("left",X-i+"px"))):!0}).on("touchend mouseup touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",function(){R&&(R=!1,Math.abs(i)>a.swipeTolerance?D(i>0?1:-1):p?k(a.animationSpeed/1e3,"0px"):x.animate({left:X+"px"},a.animationSpeed/2))}),this.open=function(e){C(e)},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){"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",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,d="simplelb",p=e("
").addClass("sl-overlay"),f=e(""),u=e("
").addClass("sl-counter").html('/'),m=!1,v=0,b=e(),x=e("
").addClass("sl-caption"),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&&f.appendTo(y),i.showCounter&&e(r).length>1&&(u.appendTo(y),u.find(".sl-total").text(e(r).length)),i.nav&&h.appendTo(y),i.spinner&&g.appendTo(y)},C=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"),g.show(),h.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,d=e(t).height()*i.heightRatio;a.src=o.attr("src"),a.onload=function(){var p=a.width,f=a.height;if(p>s||f>d){var h=p/f>s/d?p/s:f/d;p/=h,f/=h}e(".sl-image").css({top:(e(t).height()-f)/2+"px",left:(e(t).width()-p)/2+"px"}),g.hide(),o.css({width:p+"px",height:f+"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(1==n||-1==n){var x={opacity:1};c?(k(0,100*n+"px"),setTimeout(function(){k(i.animationSpeed/1e3,"0px"),50})):x.left=parseInt(e(".sl-image").css("left"))+100*n+"px",e(".sl-image").animate(x,i.animationSpeed,function(){m=!1,E(b)})}else m=!1,E(b)}}},E=function(t){""!=t&&"undefined"!=typeof t&&i.captions&&x.html(t).hide().appendTo(e(".sl-image")).fadeIn("fast")},k=function(t,n){var i={};i[s+"transform"]="translateX("+n+")",i[s+"transition"]=s+"transform "+t+"s linear",e(".sl-image").css(i)},I=function(){var t=0>v+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){g.show();var n=v+t;if(!(m||(0>n||n>=e(r).length)&&0==i.loop)){m=!0,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=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."+d,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(){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."+d,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(){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."+d).unbind("keyup."+d),q(),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 18aad89..a116c44 100644 --- a/dist/simplelightbox.css +++ b/dist/simplelightbox.css @@ -123,6 +123,15 @@ animation: pulsate 1s ease-out infinite; } +/* line 116, ../sass/simplelightbox.scss */ +.sl-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + @-webkit-keyframes pulsate { 0% { transform: scale(0.1); diff --git a/dist/simplelightbox.min.css b/dist/simplelightbox.min.css index a51e380..4ca77a7 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-algin:center;display:block;z-index:1015}.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 .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-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}@-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 +.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-algin:center;display:block;z-index:1015}.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 .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-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 36d65dd..e7e4a5f 100644 --- a/dist/simplelightbox.scss +++ b/dist/simplelightbox.scss @@ -113,6 +113,14 @@ 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); diff --git a/package.json b/package.json index 9286f37..d281ec9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simplelightbox", - "version": "1.4.6", + "version": "1.5.0", "description": "Touch-friendly image lightbox for mobile and desktop with jQuery", "main": "dist/simple-lightbox.js", "repository": {