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;
})();
