SIMPLE IMAGE GALERRY JAVASCRIPT

HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"> <title>THE KiMAGES</title> <meta name="author" content="Kostas" > <link rel="stylesheet" href="css/styles.css?v=7.1"> </head> <body> <div id="main"> <div id="imgDiv" class="group"> <ul> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/1.jpg" alt="Headphones on earth"></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/2.jpg" alt="2"></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/3.jpg" alt="3"></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/4.jpg" alt=""></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/5.jpg" alt="5"></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/6.jpg" alt="6"></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/7.jpg" alt="7"></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/8.jpg" alt="8"></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/9.jpg" alt=" 9"></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/10.jpg" alt=" 10"></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/11.jpg" alt=" 11"></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/12.jpg" alt="12 "></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/13.jpg" alt="13 "></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/14.jpg" alt="14 "></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/15.jpg" alt="15 "></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/16.jpg" alt="16 "></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/17.jpg" alt="17 "></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/18.jpg" alt="18 "></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/19.jpg" alt="19 "></li> <li><img src="http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/thumb/20.jpg" alt="20 "></li> </ul> </div> </div> <div id="imgShow"> <span id="kclose">✖</span> <span id="imgTotal"></span> <span id="alts"></span> <a id="down">Download</a> <div id="loader"></div> <a id="prevImg">❮</a> <a id="nextImg">❯</a> </div> </body> </html>
CSS
*{margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} html { height: 100%; } body{ background:#eee; color: #555; overflow-x: hidden; height: 100%; font-family: Arial, sans-serif; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABlBMVEXw8PD7+fsoJwt9AAAAE0lEQVR42mNgxAGIkBiVGJXABQCkSgIp3xANdAAAAABJRU5ErkJggg==') 0 1px; } #main { max-width: 700px; display: block; margin: 0 auto; } h1{text-align: center;font-size: 24px;} #imgDiv{ width: 100%; height: auto; width: auto; display: block; margin: 0 auto; padding: 0; } #imgDiv img{ display: block; margin: 0 auto; background: #777; cursor: pointer; padding: 2px; min-width: 128px; min-height: 72px; width: auto; height: auto; -webkit-filter: grayscale(0); filter: grayscale(0); } #imgDiv img:hover{ -webkit-filter: grayscale(1) brightness(2); filter: grayscale(1) brightness(2); -webkit-box-shadow:0px 0px 0px 2px #777777 inset; -moz-box-shadow:0px 0px 0px 2px #777777 inset; box-shadow:0px 0px 0px 2px #777777 inset; } #imgDiv ul{list-style:none;margin: 0 auto;padding: 0;display: block;} #imgDiv li{ display: block; margin: 0 auto; line-height: 0; vertical-align: middle; text-align: center; font-size: 0; float: left; overflow: hidden; width: 140px; height: 96px; } #imgShow { display: none; background: #000; left: 0; top: 0; width: 100%; height: 100%; min-height: 300px; position: fixed; z-index: 999; } #imgShow img{ display: block; margin: 0 auto; position: relative; max-width: 100%; max-height: 100%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } #imgTotal{font-weight:900;font-size:32px;border-top:1px solid #999;opacity:0.7;text-align:center;background: #eee;line-height: 48px;display: block;padding: 0 24px;position:absolute;bottom: 0;z-index: 2;} #alts{border-top:1px solid #999;opacity:0.7;text-align:center;background: #eee;line-height: 48px;display: block;width: 100%;position:absolute;bottom: 0;z-index: 1;} #down{background: #eee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEUAAABmZmZ+SwYRAAAAAXRSTlMAQObYZgAAAEZJREFUeNrtzgEGADEMBdGZ+196EUV8EaiCHUC88HGMSpCTVZ1MYANogv6jC0AXAF4GWAXIGhi6Chw7gKHHwOj5hn/DDpY+lSYBNUDeCqYAAAAASUVORK5CYII=') no-repeat right 6px center;font-weight:900;font-size:14px;color: #777; border-top:1px solid #999;opacity:0.7;text-align:center;line-height: 48px;display: block; padding:0 48px 0 24px;position:absolute;bottom: 0;right:0;z-index: 1;} #kclose{ position: absolute; width: 48px; height: 48px; display: block; border:1px solid #eee; color: #eee; background: #aaa; top:0; right: 0; text-align: center; line-height: 48px; font-size: 48px; cursor: pointer; opacity: 0.7; user-select: none; -webkit-user-select: none; z-index: 2; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; } #kclose:hover{ opacity: 1; } #prevImg, #nextImg { cursor: pointer; position: absolute; top: 50%; width: 48px; height: 72px; line-height: 72px; text-align: center; color: white; font-weight: bold; font-size: 24px; transition: 0.6s ease; border-radius: 0 3px 3px 0; background: #aaa; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ z-index: 1; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 0.7; border: 1px solid #FFF; } #nextImg { right: 0; border-radius: 3px 0 0 3px; } #prevImg { left: 0; } #prevImg:hover, #nextImg:hover{opacity: 1;} #loader { position: absolute; left: 50%; top: 50%; z-index: 1; margin: -20px 0 0 -20px; border: 10px solid #aaa; border-top: 10px solid #eee; border-bottom: 10px solid #eee; border-radius: 50%; width: 48px; height: 48px; animation: spin 0.8s steps(8) infinite;} @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } @media screen and (max-width: 600px) { #imgDiv li{ width: 50%; } } @media screen and (max-width: 480px) { #imgDiv li{ width: 100%; } } .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } .group { zoom: 1; /* For IE 6/7 (trigger hasLayout) */ }
JAVASCRIPT
(function() { "use strict"; var texts = ""; var spiner = document.getElementById("loader"); var imgTotal = document.getElementById("imgTotal"); var alts = document.getElementById("alts"); var down = document.getElementById("down"); var closes = document.getElementById("kclose"); var imgIndex = 0; var prevImg = document.getElementById("prevImg"); var nextImg = document.getElementById("nextImg"); var imagesShow = document.getElementById("imgShow"); var imagesDiv = document.getElementById("imgDiv"); var elements = imagesDiv.getElementsByTagName("img"); var img = new Image(); var arr = []; for (var i = 0; i < elements.length; i++) { arr.push(elements[i]); elements[i].addEventListener("click", redirect, false); } function redirect(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false; imagesShow.style.display = "block"; imgIndex = arr.indexOf(this); imgIndex += 1; indexer(); } function indexer() { img.src = ""; loader.style.display = "block"; imagesShow.appendChild(img); texts = document.getElementsByTagName('img')[imgIndex - 1].getAttribute('alt'); alts.innerText = texts || "No alt attribute in image"; imgTotal.innerText = imgIndex + "/" + elements.length; img.src = "http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/" + imgIndex + ".jpg"; img.alt = texts; down.href = "http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/" + imgIndex + ".png"; down.download = "http://www.burundukas.lt/home/burunduk/webdesign/wp-content/themes/K777/photo/" + imgIndex + ".png"; if (elements.length === imgIndex) { nextImg.style.display = "none"; } else { nextImg.style.display = "block"; } if (imgIndex === 1) { prevImg.style.display = "none"; } else { prevImg.style.display = "block"; } } nextImg.addEventListener("click", function() { if (imgIndex < arr.length) { imgIndex += 1; indexer(); } return false; }); prevImg.addEventListener("click", function() { if (imgIndex > 1) { imgIndex -= 1; indexer(); } return false; }); closes.addEventListener("click", function() { imagesShow.style.display = "none"; }); function checkKey(e) { e = e || window.event; switch (e.keyCode) { case 37: if (imgIndex > 1) { imgIndex -= 1; indexer(); } return false; break; case 39: if (imgIndex < arr.length) { imgIndex += 1; indexer(); } return false; break; case 27: imagesShow.style.display = "none"; break; }; } document.onkeydown = checkKey; function imgLoaded() { loader.style.display = "none"; } img.onload = imgLoaded; })();
Expand for more options Login