From 5b4054da3567ba6a557791b6d29e7c70e37da35f Mon Sep 17 00:00:00 2001 From: Victor Häggqvist Date: Tue, 24 Jun 2014 22:36:16 +0200 Subject: a build of 0.1.0 --- dist/touch-imagelightbox.css | 269 +++++++++++++++++++++++++++++++ dist/touch-imagelightbox.css.map | 7 + dist/touch-imagelightbox.js | 335 +++++++++++++++++++++++++++++++++++++++ dist/touch-imagelightbox.min.css | 1 + dist/touch-imagelightbox.min.js | 5 + 5 files changed, 617 insertions(+) create mode 100644 dist/touch-imagelightbox.css create mode 100644 dist/touch-imagelightbox.css.map create mode 100644 dist/touch-imagelightbox.js create mode 100644 dist/touch-imagelightbox.min.css create mode 100644 dist/touch-imagelightbox.min.js diff --git a/dist/touch-imagelightbox.css b/dist/touch-imagelightbox.css new file mode 100644 index 0000000..ef2d161 --- /dev/null +++ b/dist/touch-imagelightbox.css @@ -0,0 +1,269 @@ +html { + -ms-touch-action: manipulation; + touch-action: manipulation; +} + +#imagelightbox { + -ms-touch-action: none; + touch-action: none; + -moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px; + -webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px; + box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px; + cursor: pointer; + position: fixed; + z-index: 10000; +} + +#imagelightbox-loading, +#imagelightbox-loading div { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; +} + +#imagelightbox-loading { + -moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px; + -webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px; + box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px; + background: #444; + background: rgba(0, 0, 0, 0.5); + height: 20px; + left: 50%; + margin: -20px 0 0 -20px; + padding: 10px; + position: fixed; + top: 50%; + width: 20px; + z-index: 10003; +} +#imagelightbox-loading div { + -moz-animation: imagelightbox-loading .5s ease infinite; + -o-animation: imagelightbox-loading .5s ease infinite; + -webkit-animation: imagelightbox-loading .5s ease infinite; + animation: imagelightbox-loading .5s ease infinite; + background-color: #fff; + height: 20px; + width: 20px; +} + +@-webkit-keyframes imagelightbox-loading { + 0% { + opacity: .5; + -webkit-transform: scale(0.75); + } + + 50% { + opacity: 1; + -webkit-transform: scale(1); + } + + 100% { + opacity: .5; + -webkit-transform: scale(0.75); + } +} +@-moz-keyframes imagelightbox-loading { + 0% { + opacity: .5; + -moz-transform: scale(0.75); + } + + 50% { + opacity: 1; + -moz-transform: scale(1); + } + + 100% { + opacity: .5; + -moz-transform: scale(0.75); + } +} +@-o-keyframes imagelightbox-loading { + 0% { + opacity: .5; + -o-transform: scale(0.75); + } + + 50% { + opacity: 1; + -o-transform: scale(1); + } + + 100% { + opacity: .5; + -o-transform: scale(0.75); + } +} +@keyframes imagelightbox-loading { + 0% { + opacity: .5; + transform: scale(0.75); + } + + 50% { + opacity: 1; + transform: scale(1); + } + + 100% { + opacity: .5; + transform: scale(0.75); + } +} +#imagelightbox-overlay { + background: #fff; + background: rgba(255, 255, 255, 0.9); + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 9998; +} + +#imagelightbox-close { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + background-color: #666; + height: 40px; + position: fixed; + right: 40px; + text-align: left; + text-indent: -9999px; + top: 40px; + -moz-transition: color .3s ease; + -ms-transition: color .3s ease; + -o-transition: color .3s ease; + -webkit-transition: color .3s ease; + transition: color .3s ease; + width: 40px; + z-index: 10002; +} +#imagelightbox-close:hover { + background-color: #111; +} +#imagelightbox-close:before, #imagelightbox-close:after { + background-color: #fff; + bottom: 20%; + content: ''; + left: 50%; + margin-left: -1px; + position: absolute; + top: 20%; + width: 2px; +} +#imagelightbox-close:before { + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +#imagelightbox-close:after { + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +#imagelightbox-caption { + background-color: #666; + bottom: 0; + color: #fff; + left: 0; + padding: 10px; + position: fixed; + right: 0; + text-align: center; + z-index: 10001; +} + +#imagelightbox-nav { + -moz-border-radius: 20px; + -webkit-border-radius: 20px; + border-radius: 20px; + -moz-transform: translateX(-50%); + -ms-transform: translateX(-50%); + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + background-color: #444; + background-color: rgba(0, 0, 0, 0.5); + bottom: 60px; + left: 50%; + padding: 5px 2px 1px; + position: fixed; + z-index: 10001; +} +#imagelightbox-nav a { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + border: 1px solid #fff; + display: inline-block; + height: 20px; + margin: 0 5px; + width: 20px; +} +#imagelightbox-nav a .active { + background-color: #fff; +} + +#imagelightbox-loading, +#imagelightbox-overlay, +#imagelightbox-close, +#imagelightbox-caption, +#imagelightbox-nav { + -moz-animation: fade-in .25s linear; + -o-animation: fade-in .25s linear; + -webkit-animation: fade-in .25s linear; + animation: fade-in .25s linear; +} + +@-webkit-keyframes fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} +@-moz-keyframes fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} +@-o-keyframes fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} +@keyframes fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} +@media only screen and (max-width: 660px) { + #imagelightbox-close { + right: 20px; + top: 20px; + } + + #imagelightbox-nav { + bottom: 20px; + } +} + +/*# sourceMappingURL=touch-imagelightbox.css.map */ diff --git a/dist/touch-imagelightbox.css.map b/dist/touch-imagelightbox.css.map new file mode 100644 index 0000000..beb587c --- /dev/null +++ b/dist/touch-imagelightbox.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["../sass/touch-imagelightbox.scss","../../../.rvm/gems/ruby-2.1.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/_support.scss","../../../.rvm/gems/ruby-2.1.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_box-shadow.scss","../../../.rvm/gems/ruby-2.1.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_border-radius.scss","../sass/_variables.scss","../../../.rvm/gems/ruby-2.1.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_transform.scss"], +"names": [], +"file": "touch-imagelightbox.css" +} diff --git a/dist/touch-imagelightbox.js b/dist/touch-imagelightbox.js new file mode 100644 index 0000000..7113c3c --- /dev/null +++ b/dist/touch-imagelightbox.js @@ -0,0 +1,335 @@ +/*! touch-imagelightbox - v0.1.0 - 2014-06-24 +* https://github.com/victorhaggqvist/touch-imagelightbox +* Copyright (c) 2014 Osvaldas Valutis (www.osvaldas.info); Licensed MIT +* Contributors Victor Häggqvist (victorhaggqvist.com) */ +;( function( $, window, document, undefined ) { + 'use strict'; + var options, + cssTransitionSupport = function() { + var d = document.body || document.documentElement, s = d.style; + if ( s.WebkitTransition === '' ) + return '-webkit-'; + if ( s.MozTransition === '' ) + return '-moz-'; + if ( s.OTransition === '' ) + return '-o-'; + if ( s.transition === '' ) + return ''; + return false; + }, + + isCssTransitionSupport = cssTransitionSupport() === false ? false : true, + + cssTransitionTranslateX = function( element, positionX, speed ) { + options = {}; + var prefix = cssTransitionSupport(); + options[ prefix + 'transform' ] = 'translateX(' + positionX + ')'; + options[ prefix + 'transition' ] = prefix + 'transform ' + speed + 's linear'; + element.css( options ); + }, + + hasTouch = ( 'ontouchstart' in window ), + hasPointers = window.navigator.pointerEnabled || window.navigator.msPointerEnabled, + wasTouched = function( event ) { + if( hasTouch ) + return true; + + if( !hasPointers || 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; + }; + + $.fn.imageLightbox = function( options ) { + options = $.extend( + { + selector: 'id="imagelightbox"', + allowedTypes: 'png|jpg|jpeg|gif', + animationSpeed: 250, + preloadNext: true, + enableKeyboard: true, + quitOnEnd: false, + quitOnImgClick: false, + quitOnDocClick: true, + onStart: false, + onEnd: false, + onLoadStart: false, + onLoadEnd: false + }, + options); + + var targets = $([]), + target = $(), + image = $(), + imageWidth = 0, + imageHeight = 0, + swipeDiff = 0, + inProgress = false, + + isTargetValid = function( element ) { + this.regexValidObject = /(\.(' + options.allowedTypes + ')$)/; + return $( element ).prop( 'tagName' ).toLowerCase() === 'a' && this.regexValidObject.test($(element).attr('href') ); + }, + + setImage = function() { + if( !image.length ) return false; + + var screenWidth = $( window ).width() * 0.8, + screenHeight = $( window ).height() * 0.9, + tmpImage = new Image(); + + tmpImage.src = image.attr( 'src' ); + tmpImage.onload = function() { + imageWidth = tmpImage.width; + imageHeight = tmpImage.height; + + if( imageWidth > screenWidth || imageHeight > screenHeight ) { + var ratio = imageWidth / imageHeight > screenWidth / screenHeight ? imageWidth / screenWidth : imageHeight / screenHeight; + imageWidth /= ratio; + imageHeight /= ratio; + } + + image.css( + { + 'width': imageWidth + 'px', + 'height': imageHeight + 'px', + 'top': ( $( window ).height() - imageHeight ) / 2 + 'px', + 'left': ( $( window ).width() - imageWidth ) / 2 + 'px' + } + ); + }; + }, + + loadImage = function( direction ) { + if( inProgress ) return false; + + direction = typeof direction === 'undefined' ? false : direction === 'left' ? 1 : -1; + + // BIG if + if( image.length ) { + if( direction !== false && + ( targets.length < 2 || + ( options.quitOnEnd === true && + ( + ( direction === -1 && + targets.index( target ) === 0 + ) || + ( direction === 1 && + targets.index( target ) === targets.length - 1 + ) ) ) ) + ) + { + quitLightbox(); + return false; + } + var params = { 'opacity': 0 }; + if( isCssTransitionSupport ){ + cssTransitionTranslateX( image, ( 100 * direction ) - swipeDiff + 'px', options.animationSpeed / 1000 ); + } else { + params.left = parseInt( image.css( 'left' ) ) + 100 * direction + 'px'; + } + image.animate( params, options.animationSpeed, function(){ removeImage(); }); + swipeDiff = 0; + } + + inProgress = true; + if( options.onLoadStart !== false ) options.onLoadStart(); + + setTimeout( function() { + image = $( '' ) + .attr( 'src', target.attr( 'href' ) ) + .load( function() + { + image.appendTo( 'body' ); + setImage(); + + var params = { 'opacity': 1 }; + + image.css( 'opacity', 0 ); + if( isCssTransitionSupport ) + { + cssTransitionTranslateX( image, -100 * direction + 'px', 0 ); + setTimeout( function(){ + cssTransitionTranslateX( image, 0 + 'px', options.animationSpeed / 1000 ); + }, 50 ); + } + else + { + var imagePosLeft = parseInt( image.css( 'left' ) ); + params.left = imagePosLeft + 'px'; + image.css( 'left', imagePosLeft - 100 * direction + 'px' ); + } + + image.animate( params, options.animationSpeed, function() + { + inProgress = false; + if( options.onLoadEnd !== false ) options.onLoadEnd(); + }); + if( options.preloadNext ) + { + var nextTarget = targets.eq( targets.index( target ) + 1 ); + if( !nextTarget.length ) nextTarget = targets.eq( 0 ); + $( '' ).attr( 'src', nextTarget.attr( 'href' ) ).load(); + } + }) + .error( function() { + if( options.onLoadEnd !== false ) + options.onLoadEnd(); + }); + + var swipeStart = 0, + swipeEnd = 0, + imagePosLeft = 0; + + image.on( hasPointers ? 'pointerup MSPointerUp' : 'click', function( e ) { + e.preventDefault(); + if( options.quitOnImgClick ) { + quitLightbox(); + return false; + } + + if( wasTouched( e.originalEvent ) ) + return true; + + var posX = ( e.pageX || e.originalEvent.pageX ) - e.target.offsetLeft; + target = targets.eq( targets.index( target ) - ( imageWidth / 2 > posX ? 1 : -1 ) ); + + if( !target.length ) + target = targets.eq( imageWidth / 2 > posX ? targets.length : 0 ); + + loadImage( imageWidth / 2 > posX ? 'left' : 'right' ); + }) + .on( 'touchstart pointerdown MSPointerDown', function( e ) { + if( !wasTouched( e.originalEvent ) || options.quitOnImgClick ) + return true; + if( isCssTransitionSupport ) + imagePosLeft = parseInt( image.css( 'left' ) ); + + swipeStart = e.originalEvent.pageX || e.originalEvent.touches[ 0 ].pageX; + }) + .on( 'touchmove pointermove MSPointerMove', function( e ) { + if( !wasTouched( e.originalEvent ) || options.quitOnImgClick ) + return true; + + e.preventDefault(); + swipeEnd = e.originalEvent.pageX || e.originalEvent.touches[ 0 ].pageX; + swipeDiff = swipeStart - swipeEnd; + + if( isCssTransitionSupport ) + cssTransitionTranslateX( image, -swipeDiff + 'px', 0 ); + else + image.css( 'left', imagePosLeft - swipeDiff + 'px' ); + }) + .on( 'touchend touchcancel pointerup MSPointerUp', function( e ) { + if( !wasTouched( e.originalEvent ) || options.quitOnImgClick ) + return true; + if( Math.abs( swipeDiff ) > 50 ) { + target = targets.eq( targets.index( target ) - ( swipeDiff < 0 ? 1 : -1 ) ); + + if( !target.length ) + target = targets.eq( swipeDiff < 0 ? targets.length : 0 ); + loadImage( swipeDiff > 0 ? 'right' : 'left' ); + } else { + if( isCssTransitionSupport ) + cssTransitionTranslateX( image, 0 + 'px', options.animationSpeed / 1000 ); + else + image.animate({ 'left': imagePosLeft + 'px' }, options.animationSpeed / 2 ); + } + }); + + }, options.animationSpeed + 100 ); + }, + + removeImage = function() { + if( !image.length ) + return false; + image.remove(); + image = $(); + }, + + quitLightbox = function() { + if( !image.length ) + return false; + image.animate({ 'opacity': 0 }, options.animationSpeed, function() { + removeImage(); + inProgress = false; + if( options.onEnd !== false ) + options.onEnd(); + }); + }; + + $( window ).on( 'resize', setImage ); + + if( options.quitOnDocClick ) { + $( document ).on( hasTouch ? 'touchend' : 'click', function( e ) { + if( image.length && !$( e.target ).is( image ) ) quitLightbox(); + }); + } + + if( options.enableKeyboard ) { + $( document ).on( 'keyup', function( e ) { + if( !image.length ) + return true; + + e.preventDefault(); + + if( e.keyCode === 27 ) + quitLightbox(); + + if( e.keyCode === 37 || e.keyCode === 39 ) { + target = targets.eq( targets.index( target ) - ( e.keyCode === 37 ? 1 : -1 ) ); + + if( !target.length ) + target = targets.eq( e.keyCode === 37 ? targets.length : 0 ); + + loadImage( e.keyCode === 37 ? 'left' : 'right' ); + } + }); + } + + $( document ).on( 'click', this.selector, function( e ) { + if( !isTargetValid( this ) ) + return true; + e.preventDefault(); + + if( inProgress ) + return false; + inProgress = false; + + if( options.onStart !== false ) + options.onStart(); + target = $( this ); + loadImage(); + }); + + this.each( function() { + if( !isTargetValid( this ) ) return true; + targets = targets.add( $( this ) ); + }); + + this.switchImageLightbox = function( index ) { + var tmpTarget = targets.eq( index ); + if( tmpTarget.length ) { + var currentIndex = targets.index( target ); + target = tmpTarget; + loadImage( index < currentIndex ? 'left' : 'right' ); + } + return this; + }; + + this.quitImageLightbox = function() { + quitLightbox(); + return this; + }; + + return this; + }; +})( jQuery, window, document ); diff --git a/dist/touch-imagelightbox.min.css b/dist/touch-imagelightbox.min.css new file mode 100644 index 0000000..a3e91eb --- /dev/null +++ b/dist/touch-imagelightbox.min.css @@ -0,0 +1 @@ +html{-ms-touch-action:manipulation;touch-action:manipulation}#imagelightbox{-ms-touch-action:none;touch-action:none;-moz-box-shadow:rgba(0,0,0,0.75) 0 0 50px;-webkit-box-shadow:rgba(0,0,0,0.75) 0 0 50px;box-shadow:rgba(0,0,0,0.75) 0 0 50px;cursor:pointer;position:fixed;z-index:10000}#imagelightbox-loading,#imagelightbox-loading div{-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%}#imagelightbox-loading{-moz-box-shadow:rgba(0,0,0,0.75) 0 0 40px;-webkit-box-shadow:rgba(0,0,0,0.75) 0 0 40px;box-shadow:rgba(0,0,0,0.75) 0 0 40px;background:#444;background:rgba(0,0,0,0.5);height:20px;left:50%;margin:-20px 0 0 -20px;padding:10px;position:fixed;top:50%;width:20px;z-index:10003}#imagelightbox-loading div{-moz-animation:imagelightbox-loading .5s ease infinite;-o-animation:imagelightbox-loading .5s ease infinite;-webkit-animation:imagelightbox-loading .5s ease infinite;animation:imagelightbox-loading .5s ease infinite;background-color:#fff;height:20px;width:20px}@-webkit-keyframes imagelightbox-loading{0%{opacity:.5;-webkit-transform:scale(0.75)}50%{opacity:1;-webkit-transform:scale(1)}100%{opacity:.5;-webkit-transform:scale(0.75)}}@-moz-keyframes imagelightbox-loading{0%{opacity:.5;-moz-transform:scale(0.75)}50%{opacity:1;-moz-transform:scale(1)}100%{opacity:.5;-moz-transform:scale(0.75)}}@-o-keyframes imagelightbox-loading{0%{opacity:.5;-o-transform:scale(0.75)}50%{opacity:1;-o-transform:scale(1)}100%{opacity:.5;-o-transform:scale(0.75)}}@keyframes imagelightbox-loading{0%{opacity:.5;transform:scale(0.75)}50%{opacity:1;transform:scale(1)}100%{opacity:.5;transform:scale(0.75)}}#imagelightbox-overlay{background:#fff;background:rgba(255,255,255,0.9);bottom:0;left:0;position:fixed;right:0;top:0;z-index:9998}#imagelightbox-close{-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background-color:#666;height:40px;position:fixed;right:40px;text-align:left;text-indent:-9999px;top:40px;-moz-transition:color .3s ease;-ms-transition:color .3s ease;-o-transition:color .3s ease;-webkit-transition:color .3s ease;transition:color .3s ease;width:40px;z-index:10002}#imagelightbox-close:hover{background-color:#111}#imagelightbox-close:before,#imagelightbox-close:after{background-color:#fff;bottom:20%;content:'';left:50%;margin-left:-1px;position:absolute;top:20%;width:2px}#imagelightbox-close:before{-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}#imagelightbox-close:after{-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}#imagelightbox-caption{background-color:#666;bottom:0;color:#fff;left:0;padding:10px;position:fixed;right:0;text-align:center;z-index:10001}#imagelightbox-nav{-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#444;background-color:rgba(0,0,0,0.5);bottom:60px;left:50%;padding:5px 2px 1px;position:fixed;z-index:10001}#imagelightbox-nav a{-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;border:1px solid #fff;display:inline-block;height:20px;margin:0 5px;width:20px}#imagelightbox-nav a .active{background-color:#fff}#imagelightbox-loading,#imagelightbox-overlay,#imagelightbox-close,#imagelightbox-caption,#imagelightbox-nav{-moz-animation:fade-in .25s linear;-o-animation:fade-in .25s linear;-webkit-animation:fade-in .25s linear;animation:fade-in .25s linear}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-o-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@media only screen and (max-width: 660px){#imagelightbox-close{right:20px;top:20px}#imagelightbox-nav{bottom:20px}} diff --git a/dist/touch-imagelightbox.min.js b/dist/touch-imagelightbox.min.js new file mode 100644 index 0000000..ee613fc --- /dev/null +++ b/dist/touch-imagelightbox.min.js @@ -0,0 +1,5 @@ +/*! touch-imagelightbox - v0.1.0 - 2014-06-24 +* https://github.com/victorhaggqvist/touch-imagelightbox +* Copyright (c) 2014 Osvaldas Valutis (www.osvaldas.info); Licensed MIT +* Contributors Victor Häggqvist (victorhaggqvist.com) */ +!function(a,b,c){"use strict";var d,e=function(){var a=c.body||c.documentElement,b=a.style;return""===b.WebkitTransition?"-webkit-":""===b.MozTransition?"-moz-":""===b.OTransition?"-o-":""===b.transition?"":!1},f=e()===!1?!1:!0,g=function(a,b,c){d={};var f=e();d[f+"transform"]="translateX("+b+")",d[f+"transition"]=f+"transform "+c+"s linear",a.css(d)},h="ontouchstart"in b,i=b.navigator.pointerEnabled||b.navigator.msPointerEnabled,j=function(a){if(h)return!0;if(!i||"undefined"==typeof a||"undefined"==typeof a.pointerType)return!1;if("undefined"!=typeof a.MSPOINTER_TYPE_MOUSE){if(a.MSPOINTER_TYPE_MOUSE!==a.pointerType)return!0}else if("mouse"!==a.pointerType)return!0;return!1};a.fn.imageLightbox=function(d){d=a.extend({selector:'id="imagelightbox"',allowedTypes:"png|jpg|jpeg|gif",animationSpeed:250,preloadNext:!0,enableKeyboard:!0,quitOnEnd:!1,quitOnImgClick:!1,quitOnDocClick:!0,onStart:!1,onEnd:!1,onLoadStart:!1,onLoadEnd:!1},d);var e=a([]),k=a(),l=a(),m=0,n=0,o=0,p=!1,q=function(b){return this.regexValidObject=/(\.(' + options.allowedTypes + ')$)/,"a"===a(b).prop("tagName").toLowerCase()&&this.regexValidObject.test(a(b).attr("href"))},r=function(){if(!l.length)return!1;var c=.8*a(b).width(),d=.9*a(b).height(),e=new Image;e.src=l.attr("src"),e.onload=function(){if(m=e.width,n=e.height,m>c||n>d){var f=m/n>c/d?m/c:n/d;m/=f,n/=f}l.css({width:m+"px",height:n+"px",top:(a(b).height()-n)/2+"px",left:(a(b).width()-m)/2+"px"})}},s=function(b){if(p)return!1;if(b="undefined"==typeof b?!1:"left"===b?1:-1,l.length){if(b!==!1&&(e.length<2||d.quitOnEnd===!0&&(-1===b&&0===e.index(k)||1===b&&e.index(k)===e.length-1)))return u(),!1;var c={opacity:0};f?g(l,100*b-o+"px",d.animationSpeed/1e3):c.left=parseInt(l.css("left"))+100*b+"px",l.animate(c,d.animationSpeed,function(){t()}),o=0}p=!0,d.onLoadStart!==!1&&d.onLoadStart(),setTimeout(function(){l=a("").attr("src",k.attr("href")).load(function(){l.appendTo("body"),r();var c={opacity:1};if(l.css("opacity",0),f)g(l,-100*b+"px",0),setTimeout(function(){g(l,"0px",d.animationSpeed/1e3)},50);else{var h=parseInt(l.css("left"));c.left=h+"px",l.css("left",h-100*b+"px")}if(l.animate(c,d.animationSpeed,function(){p=!1,d.onLoadEnd!==!1&&d.onLoadEnd()}),d.preloadNext){var i=e.eq(e.index(k)+1);i.length||(i=e.eq(0)),a("").attr("src",i.attr("href")).load()}}).error(function(){d.onLoadEnd!==!1&&d.onLoadEnd()});var c=0,h=0,n=0;l.on(i?"pointerup MSPointerUp":"click",function(a){if(a.preventDefault(),d.quitOnImgClick)return u(),!1;if(j(a.originalEvent))return!0;var b=(a.pageX||a.originalEvent.pageX)-a.target.offsetLeft;k=e.eq(e.index(k)-(m/2>b?1:-1)),k.length||(k=e.eq(m/2>b?e.length:0)),s(m/2>b?"left":"right")}).on("touchstart pointerdown MSPointerDown",function(a){return!j(a.originalEvent)||d.quitOnImgClick?!0:(f&&(n=parseInt(l.css("left"))),void(c=a.originalEvent.pageX||a.originalEvent.touches[0].pageX))}).on("touchmove pointermove MSPointerMove",function(a){return!j(a.originalEvent)||d.quitOnImgClick?!0:(a.preventDefault(),h=a.originalEvent.pageX||a.originalEvent.touches[0].pageX,o=c-h,void(f?g(l,-o+"px",0):l.css("left",n-o+"px")))}).on("touchend touchcancel pointerup MSPointerUp",function(a){return!j(a.originalEvent)||d.quitOnImgClick?!0:void(Math.abs(o)>50?(k=e.eq(e.index(k)-(0>o?1:-1)),k.length||(k=e.eq(0>o?e.length:0)),s(o>0?"right":"left")):f?g(l,"0px",d.animationSpeed/1e3):l.animate({left:n+"px"},d.animationSpeed/2))})},d.animationSpeed+100)},t=function(){return l.length?(l.remove(),void(l=a())):!1},u=function(){return l.length?void l.animate({opacity:0},d.animationSpeed,function(){t(),p=!1,d.onEnd!==!1&&d.onEnd()}):!1};return a(b).on("resize",r),d.quitOnDocClick&&a(c).on(h?"touchend":"click",function(b){l.length&&!a(b.target).is(l)&&u()}),d.enableKeyboard&&a(c).on("keyup",function(a){return l.length?(a.preventDefault(),27===a.keyCode&&u(),void((37===a.keyCode||39===a.keyCode)&&(k=e.eq(e.index(k)-(37===a.keyCode?1:-1)),k.length||(k=e.eq(37===a.keyCode?e.length:0)),s(37===a.keyCode?"left":"right")))):!0}),a(c).on("click",this.selector,function(b){return q(this)?(b.preventDefault(),p?!1:(p=!1,d.onStart!==!1&&d.onStart(),k=a(this),void s())):!0}),this.each(function(){return q(this)?void(e=e.add(a(this))):!0}),this.switchImageLightbox=function(a){var b=e.eq(a);if(b.length){var c=e.index(k);k=b,s(c>a?"left":"right")}return this},this.quitImageLightbox=function(){return u(),this},this}}(jQuery,window,document); \ No newline at end of file -- cgit v1.2.3