diff options
Diffstat (limited to 'demo/index.html')
| -rw-r--r-- | demo/index.html | 561 |
1 files changed, 561 insertions, 0 deletions
diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..08925c5 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,561 @@ +<!DOCTYPE html> +<html lang="en"> + <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="http://osvaldas.info/theme/css/_reset.css"> + <link rel="stylesheet" href="http://osvaldas.info/examples/main.css"> --> + <link rel="stylesheet" href="demo.css"> + <link rel="stylesheet" href="imagelightbox.min.css"> + <!-- <style> + + html + { + /* killing 300ms touch delay in IE */ + -ms-touch-action: manipulation; + touch-action: manipulation; + } + + body + { + font-family: 'Fjalla One', sans-serif; + background-color: #efefef; + } + + #container + { + width: 41.25em; /* 660 */ + text-align: center; + padding: 0 20px; + margin: 3.125em auto 6.25em; /* 50 100 */ + } + #container h1 + { + font-size: 2.125em; /* 34 */ + line-height: 0.882em; /* 30 (34) */ + text-transform: uppercase; + } + #container h1 span + { + font-size: 0.588em; /* 20 (34) */ + line-height: 1em; /* 20 (20) */ + color: #aaa; + display: block; + } + #container h1 a:hover, + #container h1 a:hover span + { + color: #666; + } + + #container h2 + { + border-top: 1px solid #ddd; + padding-top: 1.875em; /* 30 */ + margin-top: 1.875em; /* 30 */ + margin-bottom: 0.625em; /* 10 */ + } + #container h2 span + { + color: #666; + } + + #container ul + { + } + #container li + { + display: inline-block; + margin: 0.625em; /* 10 */ + } + #container img + { + width: 8.75em; /* 140 */ + height: 8.75em; /* 140 */ + border-color: #eee; + border: 0.625em solid rgba( 255, 255, 255, .5 ); /* 10 */ + + -webkit-box-shadow: 0 0 0.313em rgba( 0, 0, 0, .05 ); /* 5 */ + -moz-box-shadow: 0 0 0.313em rgba( 0, 0, 0, .05 ); /* 5 */ + box-shadow: 0 0 0.313em rgba( 0, 0, 0, .05 ); /* 5 */ + + -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; + transition: box-shadow .3s ease, border-color .3s ease; + } + #container img:hover + { + border-color: #fff; + + -webkit-box-shadow: 0 0 0.938em rgba( 0, 0, 0, .25 ); /* 15 */ + -moz-box-shadow: 0 0 0.938em rgba( 0, 0, 0, .25 ); /* 15 */ + box-shadow: 0 0 0.938em rgba( 0, 0, 0, .25 ); /* 15 */ + } + + footer + { + font-size: 0.875em; /* 14 */ + color: #aaa; + border-top: 1px solid #ddd; + padding-top: 2.143em; /* 30 (14) */ + margin-top: 2.143em; /* 30 (14) */ + } + + + /* IMAGE LIGHTBOX SELECTOR */ + + #imagelightbox + { + cursor: pointer; + position: fixed; + z-index: 10000; + + -ms-touch-action: none; + touch-action: none; + + -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */ + -moz-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */ + box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */ + } + + + /* WITH ACTIVITY INDICATION */ + + #imagelightbox-loading, + #imagelightbox-loading div + { + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + } + #imagelightbox-loading + { + width: 2.5em; /* 40 */ + height: 2.5em; /* 40 */ + background-color: #444; + background-color: rgba( 0, 0, 0, .5 ); + position: fixed; + z-index: 10003; + top: 50%; + left: 50%; + padding: 0.625em; /* 10 */ + margin: -1.25em 0 0 -1.25em; /* 20 */ + + -webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */ + -moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */ + box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */ + } + #imagelightbox-loading div + { + width: 1.25em; /* 20 */ + height: 1.25em; /* 20 */ + 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( .75 ); } + 50% { opacity: 1; -webkit-transform: scale( 1 ); } + to { opacity: .5; -webkit-transform: scale( .75 ); } + } + @-moz-keyframes imagelightbox-loading + { + from { opacity: .5; -moz-transform: scale( .75 ); } + 50% { opacity: 1; -moz-transform: scale( 1 ); } + to { opacity: .5; -moz-transform: scale( .75 ); } + } + @-o-keyframes imagelightbox-loading + { + from { opacity: .5; -o-transform: scale( .75 ); } + 50% { opacity: 1; -o-transform: scale( 1 ); } + to { opacity: .5; -o-transform: scale( .75 ); } + } + @keyframes imagelightbox-loading + { + from { opacity: .5; transform: scale( .75 ); } + 50% { opacity: 1; transform: scale( 1 ); } + to { opacity: .5; transform: scale( .75 ); } + } + + + + /* WITH OVERLAY */ + + #imagelightbox-overlay + { + background-color: #fff; + background-color: rgba( 255, 255, 255, .9 ); + position: fixed; + z-index: 9998; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + + /* WITH "CLOSE" BUTTON */ + + #imagelightbox-close + { + width: 2.5em; /* 40 */ + height: 2.5em; /* 40 */ + text-align: left; + text-indent: -9999px; + background-color: #666; + position: fixed; + z-index: 10002; + top: 2.5em; /* 40 */ + right: 2.5em; /* 40 */ + + -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 ); + } + + + /* WITH CAPTION */ + + #imagelightbox-caption + { + text-align: center; + color: #fff; + background-color: #666; + position: fixed; + z-index: 10001; + left: 0; + right: 0; + bottom: 0; + padding: 0.625em; /* 10 */ + } + + + /* WITH NAVIGATION */ + + #imagelightbox-nav + { + background-color: #444; + background-color: rgba( 0, 0, 0, .5 ); + position: fixed; + z-index: 10001; + left: 50%; + bottom: 3.75em; /* 60 */ + padding: 0.313em; /* 5 */ + + -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; /* 20 */ + height: 1em; /* 20 */ + border: 1px solid #fff; + display: inline-block; + margin: 0 0.313em; /* 5 */ + + -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.250em) /* 660 */ + { + #container + { + width: 100%; + } + #imagelightbox-close + { + top: 1.25em; /* 20 */ + right: 1.25em; /* 20 */ + } + #imagelightbox-nav + { + bottom: 1.25em; /* 20 */ + } + } + + </style> --> + +</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> |