villiwalla,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5);
display: none;
}
.lightbox-image {
display: none;
width: 300px;
height: 400px;
line-height: 400px;
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #f1c40f;
border-radius: 5px;
text-align: center;
z-index: 11; /* 1px higher than the overlay layer */
}
.lightbox-image img{
height: 100%;
width: auto;
}
.show{
display: block;
}
.lightbox{
height: 150px;
}
</style>
</head>
<body>
<img src="http://www.disneyclips.com/imagesnewb/images/clipzummi2.gif" data-src="http://www.disneyclips.com/imagesnewb/images/clipzummi2.gif" rel="group1" class="lightbox">
<img src="http://www.0lik.ru/uploads/posts/2008-10/1223398222_0lik.ru_222.png" data-src="http://www.0lik.ru/uploads/posts/2008-10/1223398222_0lik.ru_222.png" rel="group1" class="lightbox">
<img src="http://cliparts.co/cliparts/8iG/686/8iG686orT.gif" data-src="http://cliparts.co/cliparts/8iG/686/8iG686orT.gif" rel="group1" class="lightbox">
<script>
var overlay = document.createElement('div');
overlay.className = 'overlay';
document.body.appendChild(overlay);
var containLb = document.createElement('div');
containLb.className = 'lightbox-image';
var bigImg = new Image;
containLb.appendChild(bigImg);
document.body.appendChild(containLb);
var indx = 0, arrSrc = [] ;
var gallery = document.querySelectorAll('.lightbox');
[].forEach.call(gallery, function(item, i) {
arrSrc[i] = item.dataset.src;
item.addEventListener('click', function() {
indx = i;
bigImg.src = arrSrc[indx];
containLb.classList.toggle("show");
overlay.classList.toggle("show");
},false);
});
overlay.addEventListener('click', function() {
containLb.classList.toggle("show");
overlay.classList.toggle("show");
}, false);
containLb.addEventListener('click', function(event) {
event.preventDefault();
indx = ++indx % arrSrc.length;
bigImg.src = arrSrc[indx];
}, false);
</script>
</body>
</html>