summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorVictor Häggqvist <[email protected]>2014-06-25 01:23:20 +0200
committerVictor Häggqvist <[email protected]>2014-06-25 01:23:20 +0200
commit011943967e10c6c7e2fd7a0dfeaad00b9ba38694 (patch)
tree4e93bf191ef883d6684b3e29478bb485e307cae8
parent06048e1ec76c889ddf279f828c8fdee322502815 (diff)
for later
-rw-r--r--demoo.css66
-rw-r--r--image-lightbox.min.css1
-rw-r--r--image-lightbox.min.js5
-rw-r--r--imagelightbox.min.css1
-rw-r--r--imagelightbox.min.js5
-rw-r--r--indexo.html203
6 files changed, 281 insertions, 0 deletions
diff --git a/demoo.css b/demoo.css
new file mode 100644
index 0000000..973d86a
--- /dev/null
+++ b/demoo.css
@@ -0,0 +1,66 @@
+#container {
+ margin: 3.125em auto 6.25em;
+ padding: 0 20px;
+ text-align: center;
+ width: 41.25em;
+}
+#container h1 {
+ font-size: 2.125em;
+ line-height: .882em;
+ text-transform: uppercase;
+}
+#container h1 span {
+ color: #aaa;
+ display: block;
+ font-size: .588em;
+ line-height: 1em;
+}
+#container h1:hover, #container h1:hover span {
+ color: #666;
+}
+#container h2 {
+ border-top: 1px solid #ddd;
+ margin-bottom: .625em;
+ margin-top: 1.875em;
+ padding-top: 1.875em;
+}
+#container h2 span {
+ color: #666;
+}
+#container li {
+ display: inline-block;
+ margin: .625em;
+}
+#container img {
+ -webkit-box-shadow: 0 0 0.313em rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: 0 0 0.313em rgba(0, 0, 0, 0.05);
+ -webkit-transition: -webkit-box-shadow .3s ease, border-color .3s ease;
+ -moz-transition: -moz-box-shadow .3s ease, border-color .3s ease;
+ -ms-transition: -ms-box-shadow .3s ease, border-color .3s ease;
+ -o-transition: -o-box-shadow .3s ease, border-color .3s ease;
+ border-color: #eee;
+ border: 0.625em solid rgba(255, 255, 255, 0.5);
+ height: 8.75em;
+ width: 8.75em;
+ box-shadow: 0 0 0.313em rgba(0, 0, 0, 0.05);
+ transition: box-shadow .3s ease, border-color .3s ease;
+}
+#container img:hover {
+ -webkit-box-shadow: 0 0 0.938em rgba(0, 0, 0, 0.25);
+ -moz-box-shadow: 0 0 0.938em rgba(0, 0, 0, 0.25);
+ border-color: #fff;
+ box-shadow: 0 0 0.938em rgba(0, 0, 0, 0.25);
+}
+#container footer {
+ border-top: 1px solid #ddd;
+ color: #aaa;
+ font-size: .875em;
+ margin-top: 2.143em;
+ padding-top: 2.143em;
+}
+
+@media only screen and (max-width: 660px) {
+ #container {
+ width: 100%;
+ }
+}
diff --git a/image-lightbox.min.css b/image-lightbox.min.css
new file mode 100644
index 0000000..5ef25e2
--- /dev/null
+++ b/image-lightbox.min.css
@@ -0,0 +1 @@
+html{-ms-touch-action:manipulation;touch-action:manipulation}#container{margin:3.125em auto 6.25em;padding:0 20px;text-align:center;width:41.25em}#container h1{font-size:2.125em;line-height:.882em;text-transform:uppercase}#container h1 span{color:#aaa;display:block;font-size:.588em;line-height:1em}#container h1:hover,#container h1:hover span{color:#666}#container h2{border-top:1px solid #ddd;margin-bottom:.625em;margin-top:1.875em;padding-top:1.875em}#container h2 span{color:#666}#container li{display:inline-block;margin:.625em}#container img{-webkit-box-shadow:0 0 0.313em rgba(0,0,0,0.05);-moz-box-shadow:0 0 0.313em rgba(0,0,0,0.05);-webkit-transition:-webkit-box-shadow .3s ease, border-color .3s ease;-moz-transition:-moz-box-shadow .3s ease, border-color .3s ease;-ms-transition:-ms-box-shadow .3s ease, border-color .3s ease;-o-transition:-o-box-shadow .3s ease, border-color .3s ease;border-color:#eee;border:0.625em solid rgba(255,255,255,0.5);height:8.75em;width:8.75em;box-shadow:0 0 0.313em rgba(0,0,0,0.05);transition:box-shadow .3s ease, border-color .3s ease}#container img:hover{-webkit-box-shadow:0 0 0.938em rgba(0,0,0,0.25);-moz-box-shadow:0 0 0.938em rgba(0,0,0,0.25);border-color:#fff;box-shadow:0 0 0.938em rgba(0,0,0,0.25)}#container footer{border-top:1px solid #ddd;color:#aaa;font-size:.875em;margin-top:2.143em;padding-top:2.143em}#imagelightbox{-ms-touch-action:none;touch-action:none;-webkit-box-shadow:0 0 3.125em rgba(0,0,0,0.75);-moz-box-shadow:0 0 3.125em rgba(0,0,0,0.75);box-shadow:0 0 3.125em rgba(0,0,0,0.75);cursor:pointer;position:fixed;z-index:10000}#imagelightbox-loading,#imagelightbox-loading div{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}#imagelightbox-loading{background-color:#444;background-color:rgba(0,0,0,0.5);height:2.5em;width:2.5em;position:fixed;z-index:10003;top:50%;left:50%;padding:.625em;margin:-1.25em 0 0 -1.25em;-webkit-box-shadow:0 0 2.5em rgba(0,0,0,0.75);-moz-box-shadow:0 0 2.5em rgba(0,0,0,0.75);box-shadow:0 0 2.5em rgba(0,0,0,0.75)}#imagelightbox-loading div{width:1.25em;height:1.25em;background-color:#fff;-webkit-animation:imagelightbox-loading .5s ease infinite;-moz-animation:imagelightbox-loading .5s ease infinite;-o-animation:imagelightbox-loading .5s ease infinite;animation:imagelightbox-loading .5s ease infinite}@-webkit-keyframes imagelightbox-loading{from{opacity:.5;-webkit-transform:scale(0.75)}50%{opacity:1;-webkit-transform:scale(1)}to{opacity:.5;-webkit-transform:scale(0.75)}}@-moz-keyframes imagelightbox-loading{from{opacity:.5;-moz-transform:scale(0.75)}50%{opacity:1;-moz-transform:scale(1)}to{opacity:.5;-moz-transform:scale(0.75)}}@-o-keyframes imagelightbox-loading{from{opacity:.5;-o-transform:scale(0.75)}50%{opacity:1;-o-transform:scale(1)}to{opacity:.5;-o-transform:scale(0.75)}}@keyframes imagelightbox-loading{from{opacity:.5;transform:scale(0.75)}50%{opacity:1;transform:scale(1)}to{opacity:.5;transform:scale(0.75)}}#imagelightbox-overlay{background-color:#fff;background-color:rgba(255,255,255,0.9);position:fixed;z-index:9998;top:0;right:0;bottom:0;left:0}#imagelightbox-close{width:2.5em;height:2.5em;text-align:left;text-indent:-9999px;background-color:#666;position:fixed;z-index:10002;top:2.5em;right:2.5em;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-transition:color .3s ease;-moz-transition:color .3s ease;-ms-transition:color .3s ease;-o-transition:color .3s ease;transition:color .3s ease}#imagelightbox-close:hover{background-color:#111}#imagelightbox-close:before,#imagelightbox-close:after{width:2px;background-color:#fff;content:'';position:absolute;top:20%;bottom:20%;left:50%;margin-left:-1px}#imagelightbox-close:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}#imagelightbox-close:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}#imagelightbox-caption{text-align:center;color:#fff;background-color:#666;position:fixed;z-index:10001;left:0;right:0;bottom:0;padding:.625em}#imagelightbox-nav{background-color:#444;background-color:rgba(0,0,0,0.5);position:fixed;z-index:10001;left:50%;bottom:3.75em;padding:.313em;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}#imagelightbox-nav a{width:1em;height:1em;border:1px solid #fff;display:inline-block;margin:0 .313em;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}#imagelightbox-nav a.active{background-color:#fff}#imagelightbox-loading,#imagelightbox-overlay,#imagelightbox-close,#imagelightbox-caption,#imagelightbox-nav{-webkit-animation:fade-in .25s linear;-moz-animation:fade-in .25s linear;-o-animation:fade-in .25s linear;animation:fade-in .25s linear}@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@-moz-keyframes fade-in{from{opacity:0}to{opacity:1}}@-o-keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@media only screen and (max-width: 41.25em){#container{width:100%}#imagelightbox-close{right:1.25em;top:1.25em}#imagelightbox-nav{bottom:1.25em}}
diff --git a/image-lightbox.min.js b/image-lightbox.min.js
new file mode 100644
index 0000000..3fb0bbc
--- /dev/null
+++ b/image-lightbox.min.js
@@ -0,0 +1,5 @@
+/*! image-lightbox - v0.1.0 - 2014-06-07
+* https://github.com/victorhaggqvist/image-lightbox
+* Copyright (c) 2014 Osvaldas Valutis (www.osvaldas.info); Licensed MIT
+* Contributors Victor Häggqvist (victorhaggqvist.com) */
+!function(a,b,c){"use strict";var d=function(){var a=c.body||c.documentElement,a=a.style;return""==a.WebkitTransition?"-webkit-":""==a.MozTransition?"-moz-":""==a.OTransition?"-o-":""==a.transition?"":!1},e=d()===!1?!1:!0,f=function(a,b,c){var e={},f=d();e[f+"transform"]="translateX("+b+")",e[f+"transition"]=f+"transform "+c+"s linear",a.css(e)},g="ontouchstart"in b,h=b.navigator.pointerEnabled||b.navigator.msPointerEnabled,i=function(a){if(g)return!0;if(!h||"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){var 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),j=a([]),k=a(),l=a(),m=0,n=0,o=0,p=!1,q=function(b){return"a"==a(b).prop("tagName").toLowerCase()&&new RegExp(".("+d.allowedTypes+")$","i").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&&(j.length<2||d.quitOnEnd===!0&&(-1===b&&0==j.index(k)||1===b&&j.index(k)==j.length-1)))return u(),!1;var c={opacity:0};e?f(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("<img "+d.selector+" />").attr("src",k.attr("href")).load(function(){l.appendTo("body"),r();var c={opacity:1};if(l.css("opacity",0),e)f(l,-100*b+"px",0),setTimeout(function(){f(l,"0px",d.animationSpeed/1e3)},50);else{var g=parseInt(l.css("left"));c.left=g+"px",l.css("left",g-100*b+"px")}if(l.animate(c,d.animationSpeed,function(){p=!1,d.onLoadEnd!==!1&&d.onLoadEnd()}),d.preloadNext){var h=j.eq(j.index(k)+1);h.length||(h=j.eq(0)),a("<img />").attr("src",h.attr("href")).load()}}).error(function(){d.onLoadEnd!==!1&&d.onLoadEnd()});var c=0,g=0,n=0;l.on(h?"pointerup MSPointerUp":"click",function(a){if(a.preventDefault(),d.quitOnImgClick)return u(),!1;if(i(a.originalEvent))return!0;var b=(a.pageX||a.originalEvent.pageX)-a.target.offsetLeft;k=j.eq(j.index(k)-(m/2>b?1:-1)),k.length||(k=j.eq(m/2>b?j.length:0)),s(m/2>b?"left":"right")}).on("touchstart pointerdown MSPointerDown",function(a){return!i(a.originalEvent)||d.quitOnImgClick?!0:(e&&(n=parseInt(l.css("left"))),void(c=a.originalEvent.pageX||a.originalEvent.touches[0].pageX))}).on("touchmove pointermove MSPointerMove",function(a){return!i(a.originalEvent)||d.quitOnImgClick?!0:(a.preventDefault(),g=a.originalEvent.pageX||a.originalEvent.touches[0].pageX,o=c-g,void(e?f(l,-o+"px",0):l.css("left",n-o+"px")))}).on("touchend touchcancel pointerup MSPointerUp",function(a){return!i(a.originalEvent)||d.quitOnImgClick?!0:void(Math.abs(o)>50?(k=j.eq(j.index(k)-(0>o?1:-1)),k.length||(k=j.eq(0>o?j.length:0)),s(o>0?"right":"left")):e?f(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(g?"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=j.eq(j.index(k)-(37==a.keyCode?1:-1)),k.length||(k=j.eq(37==a.keyCode?j.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(j=j.add(a(this))):!0}),this.switchImageLightbox=function(a){var b=j.eq(a);if(b.length){var c=j.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
diff --git a/imagelightbox.min.css b/imagelightbox.min.css
new file mode 100644
index 0000000..b7cf5c1
--- /dev/null
+++ b/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%;-moz-transition:color .3s ease;-ms-transition:color .3s ease;-o-transition:color .3s ease;-webkit-border-radius:50%;-webkit-transition:color .3s ease;background-color:#666;border-radius:50%;height:40px;position:fixed;right:40px;text-align:left;text-indent:-9999px;top:40px;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{-webkit-animation:fade-in .25s linear;-moz-animation:fade-in .25s linear;-o-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/imagelightbox.min.js b/imagelightbox.min.js
new file mode 100644
index 0000000..b2fe094
--- /dev/null
+++ b/imagelightbox.min.js
@@ -0,0 +1,5 @@
+/*! imagelightbox - v0.1.0 - 2014-06-10
+* https://github.com/victorhaggqvist/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=function(){var a=c.body||c.documentElement,b=a.style;return""===b.WebkitTransition?"-webkit-":""===b.MozTransition?"-moz-":""===b.OTransition?"-o-":""===b.transition?"":!1},e=d()===!1?!1:!0,f=function(a,b,c){var e={},f=d();e[f+"transform"]="translateX("+b+")",e[f+"transition"]=f+"transform "+c+"s linear",a.css(e)},g="ontouchstart"in b,h=b.navigator.pointerEnabled||b.navigator.msPointerEnabled,i=function(a){if(g)return!0;if(!h||"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){var 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),j=a([]),k=a(),l=a(),m=0,n=0,o=0,p=!1,q=function(b){return"a"===a(b).prop("tagName").toLowerCase()&&new RegExp(".("+d.allowedTypes+")$","i").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&&(j.length<2||d.quitOnEnd===!0&&(-1===b&&0===j.index(k)||1===b&&j.index(k)===j.length-1)))return u(),!1;var c={opacity:0};e?f(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("<img "+d.selector+" />").attr("src",k.attr("href")).load(function(){l.appendTo("body"),r();var c={opacity:1};if(l.css("opacity",0),e)f(l,-100*b+"px",0),setTimeout(function(){f(l,"0px",d.animationSpeed/1e3)},50);else{var g=parseInt(l.css("left"));c.left=g+"px",l.css("left",g-100*b+"px")}if(l.animate(c,d.animationSpeed,function(){p=!1,d.onLoadEnd!==!1&&d.onLoadEnd()}),d.preloadNext){var h=j.eq(j.index(k)+1);h.length||(h=j.eq(0)),a("<img />").attr("src",h.attr("href")).load()}}).error(function(){d.onLoadEnd!==!1&&d.onLoadEnd()});var c=0,g=0,n=0;l.on(h?"pointerup MSPointerUp":"click",function(a){if(a.preventDefault(),d.quitOnImgClick)return u(),!1;if(i(a.originalEvent))return!0;var b=(a.pageX||a.originalEvent.pageX)-a.target.offsetLeft;k=j.eq(j.index(k)-(m/2>b?1:-1)),k.length||(k=j.eq(m/2>b?j.length:0)),s(m/2>b?"left":"right")}).on("touchstart pointerdown MSPointerDown",function(a){return!i(a.originalEvent)||d.quitOnImgClick?!0:(e&&(n=parseInt(l.css("left"))),void(c=a.originalEvent.pageX||a.originalEvent.touches[0].pageX))}).on("touchmove pointermove MSPointerMove",function(a){return!i(a.originalEvent)||d.quitOnImgClick?!0:(a.preventDefault(),g=a.originalEvent.pageX||a.originalEvent.touches[0].pageX,o=c-g,void(e?f(l,-o+"px",0):l.css("left",n-o+"px")))}).on("touchend touchcancel pointerup MSPointerUp",function(a){return!i(a.originalEvent)||d.quitOnImgClick?!0:void(Math.abs(o)>50?(k=j.eq(j.index(k)-(0>o?1:-1)),k.length||(k=j.eq(0>o?j.length:0)),s(o>0?"right":"left")):e?f(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(g?"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=j.eq(j.index(k)-(37===a.keyCode?1:-1)),k.length||(k=j.eq(37===a.keyCode?j.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(j=j.add(a(this))):!0}),this.switchImageLightbox=function(a){var b=j.eq(a);if(b.length){var c=j.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
diff --git a/indexo.html b/indexo.html
new file mode 100644
index 0000000..c33d4e0
--- /dev/null
+++ b/indexo.html
@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
+ <meta name="msapplication-tap-highlight" content="no">
+
+ <title>Image Lightbox Demo</title>
+
+ <link rel="stylesheet" href="demo.css">
+ <link rel="stylesheet" href="imagelightbox.min.css">
+
+ </head>
+
+ <body>
+
+ <div id="container">
+ <header>
+ <h1>Image Lightbox<br><span>Responsive & Touch-Friendly</span></h1>
+ </header>
+ <h2>With activity indication</h2>
+ <ul>
+ <li><a href="./images/full/1.jpg" data-imagelightbox="a"><img src="./images/1.jpg" alt="Klaipeda in the night"></a></li>
+ <li><a href="./images/full/2.jpg" data-imagelightbox="a"><img src="./images/2.jpg" alt="Frozen river Dane"></a></li>
+ <li><a href="./images/full/3.jpg" data-imagelightbox="a"><img src="./images/3.jpg" alt="Snowy road Klaipeda-Vilnius"></a></li>
+ </ul>
+ <h2>With overlay <span>& activity indication</span></h2>
+ <ul>
+ <li><a href="./images/full/4.jpg" data-imagelightbox="b"><img src="./images/4.jpg" alt="Sun, grass and hydrant"></a></li>
+ <li><a href="./images/full/5.jpg" data-imagelightbox="b"><img src="./images/5.jpg" alt="Bridge over the railway"></a></li>
+ <li><a href="./images/full/6.jpg" data-imagelightbox="b"><img src="./images/6.jpg" alt="Railway light"></a></li>
+ </ul>
+ <h2>With "close" button <span>& activity indication</span></h2>
+ <ul>
+ <li><a href="./images/full/10.jpg" data-imagelightbox="c"><img src="./images/10.jpg" alt="Countryside somewhere in Lithuania"></a></li>
+ <li><a href="./images/full/11.jpg" data-imagelightbox="c"><img src="./images/11.jpg" alt="Storm in Klaipeda"></a></li>
+ <li><a href="./images/full/12.jpg" data-imagelightbox="c"><img src="./images/12.jpg" alt="Sunset over Plateliai lake"></a></li>
+ </ul>
+ <h2>With caption <span>& activity indication</span></h2>
+ <ul>
+ <li><a href="./images/full/7.jpg" data-imagelightbox="d"><img src="./images/7.jpg" alt="The end of the railway"></a></li>
+ <li><a href="./images/full/8.jpg" data-imagelightbox="d"><img src="./images/8.jpg" alt="Railway in Klaipeda"></a></li>
+ <li><a href="./images/full/9.jpg" data-imagelightbox="d"><img src="./images/9.jpg" alt="Herkaus Manto street in Klaipeda"></a></li>
+ </ul>
+ <h2>With navigation <span>& activity indication</span></h2>
+ <ul>
+ <li><a href="./images/full/13.jpg" data-imagelightbox="e"><img src="./images/13.jpg" alt="Afternoon in Klaipeda"></a></li>
+ <li><a href="./images/full/14.jpg" data-imagelightbox="e"><img src="./images/14.jpg" alt="Klaipeda from Smiltyne side"></a></li>
+ <li><a href="./images/full/15.jpg" data-imagelightbox="e"><img src="./images/15.jpg" alt="Some kind of bird, hopefully"></a></li>
+ </ul>
+ <h2>Combination</h2>
+ <ul>
+ <li><a href="./images/full/16.jpg" data-imagelightbox="f"><img src="./images/16.jpg" alt="Snail"></a></li>
+ <li><a href="./images/full/17.jpg" data-imagelightbox="f"><img src="./images/17.jpg" alt="Cloud pump"></a></li>
+ <li><a href="./images/full/18.jpg" data-imagelightbox="f"><img src="./images/18.jpg" alt="Gardening in lithuanian countryside"></a></li>
+ </ul>
+ <footer>
+ <p>Photos credit to Osvaldas Valutis, www.osvaldas.info</p>
+ </footer>
+ </div>
+
+
+ <script src="./bower_components/jquery/dist/jquery.min.js"></script>
+ <script src="./imagelightbox.min.js"></script>
+ <script>
+
+ $( function()
+ {
+ var activityIndicatorOn = function()
+ {
+ $( '<div id="imagelightbox-loading"><div></div></div>' ).appendTo( 'body' );
+ },
+ activityIndicatorOff = function()
+ {
+ $( '#imagelightbox-loading' ).remove();
+ },
+
+ overlayOn = function()
+ {
+ $( '<div id="imagelightbox-overlay"></div>' ).appendTo( 'body' );
+ },
+ overlayOff = function()
+ {
+ $( '#imagelightbox-overlay' ).remove();
+ },
+
+ closeButtonOn = function( instance )
+ {
+ $( '<a href="#" id="imagelightbox-close">Close</a>' ).appendTo( 'body' ).on( 'click touchend', function(){ $( this ).remove(); instance.quitImageLightbox(); return false; });
+ },
+ closeButtonOff = function()
+ {
+ $( '#imagelightbox-close' ).remove();
+ },
+
+ captionOn = function()
+ {
+ var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' ).attr( 'alt' );
+ if( description.length > 0 )
+ $( '<div id="imagelightbox-caption">' + description + '</div>' ).appendTo( 'body' );
+ },
+ captionOff = function()
+ {
+ $( '#imagelightbox-caption' ).remove();
+ },
+
+ navigationOn = function( instance, selector )
+ {
+ var images = $( selector );
+ if( images.length )
+ {
+ var nav = $( '<div id="imagelightbox-nav"></div>' );
+ for( var i = 0; i < images.length; i++ )
+ nav.append( '<a href="#"></a>' );
+
+ nav.appendTo( 'body' );
+ nav.on( 'click touchend', function(){ return false; });
+
+ var navItems = nav.find( 'a' );
+ navItems.on( 'click touchend', function()
+ {
+ var $this = $( this );
+ if( images.eq( $this.index() ).attr( 'href' ) != $( '#imagelightbox' ).attr( 'src' ) )
+ instance.switchImageLightbox( $this.index() );
+
+ navItems.removeClass( 'active' );
+ navItems.eq( $this.index() ).addClass( 'active' );
+
+ return false;
+ })
+ .on( 'touchend', function(){ return false; });
+ }
+ },
+ navigationUpdate = function( selector )
+ {
+ var items = $( '#imagelightbox-nav a' );
+ items.removeClass( 'active' );
+ items.eq( $( selector ).filter( '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ).index( selector ) ).addClass( 'active' );
+ },
+ navigationOff = function()
+ {
+ $( '#imagelightbox-nav' ).remove();
+ };
+
+ // WITH ACTIVITY INDICATION
+ $( 'a[data-imagelightbox="a"]' ).imageLightbox(
+ {
+ onLoadStart: function() { activityIndicatorOn(); },
+ onLoadEnd: function() { activityIndicatorOff(); },
+ onEnd: function() { activityIndicatorOff(); }
+ });
+
+ // WITH OVERLAY & ACTIVITY INDICATION
+ $( 'a[data-imagelightbox="b"]' ).imageLightbox(
+ {
+ onStart: function() { overlayOn(); },
+ onEnd: function() { overlayOff(); activityIndicatorOff(); },
+ onLoadStart: function() { activityIndicatorOn(); },
+ onLoadEnd: function() { activityIndicatorOff(); }
+ });
+
+ // WITH "CLOSE" BUTTON & ACTIVITY INDICATION
+ var instanceC = $( 'a[data-imagelightbox="c"]' ).imageLightbox(
+ {
+ quitOnDocClick: false,
+ onStart: function() { closeButtonOn( instanceC ); },
+ onEnd: function() { closeButtonOff(); activityIndicatorOff(); },
+ onLoadStart: function() { activityIndicatorOn(); },
+ onLoadEnd: function() { activityIndicatorOff(); }
+ });
+
+ // WITH CAPTION & ACTIVITY INDICATION
+ $( 'a[data-imagelightbox="d"]' ).imageLightbox(
+ {
+ onLoadStart: function() { captionOff(); activityIndicatorOn(); },
+ onLoadEnd: function() { captionOn(); activityIndicatorOff(); },
+ onEnd: function() { captionOff(); activityIndicatorOff(); }
+ });
+
+ // WITH DIRECTION REFERENCE
+ var selectorE = 'a[data-imagelightbox="e"]';
+ var instanceE = $( selectorE ).imageLightbox(
+ {
+ onStart: function() { navigationOn( instanceE, selectorE ); },
+ onEnd: function() { navigationOff(); activityIndicatorOff(); },
+ onLoadStart: function() { activityIndicatorOn(); },
+ onLoadEnd: function() { navigationUpdate( selectorE ); activityIndicatorOff(); }
+ });
+
+ // ALL COMBINED
+ var instanceF = $( 'a[data-imagelightbox="f"]' ).imageLightbox(
+ {
+ onStart: function() { overlayOn(); closeButtonOn( instanceF ); },
+ onEnd: function() { overlayOff(); captionOff(); closeButtonOff(); activityIndicatorOff(); },
+ onLoadStart: function() { captionOff(); activityIndicatorOn(); },
+ onLoadEnd: function() { captionOn(); activityIndicatorOff(); }
+ });
+
+ });
+ </script>
+ </body>
+</html>