revision:
<div id="mainContainer" class="spec">
<div id="thumbnails">
<img class="imgThumbnails" src="2.jpg"/>
<img class="imgThumbnails" src="3.jpg"/>
<img class="imgThumbnails" src="4.jpg" />
<img class="imgThumbnails" src="5.jpg" />
<img class="imgThumbnails" src="6.jpg" />
<img class="imgThumbnails" src="19.jpg" />
<img class="imgThumbnails" src="20.jpg" />
<img class="imgThumbnails" src="1.jpg" />
</div>
<div id="mainImage"><img src="1.jpg" /></div>
<div id="imgCaption"></div>
</div>
<style>
#mainContainer {width: 40vw; height: 40vw; top: 0;}
#mainImage {margin: 1vw; height: 20vw;}
#mainImage img {margin-left: 1vw; width: 35vw; height: 30vw; border: 1vw outset burlywood;}
#thumbnails {display: flex; flex-flow: row nowrap; padding-top: 0.2vw; width: 6vw; height: 6vw;}
.imgThumbnails {margin-left: 0.5vw;height: 5vw; width: 5vw; margin-bottom: 0vw;}
.imgThumbnails:hover {cursor: pointer;}
</style>
<script>
(function start(){
let mainImage = document.getElementById("mainImage").getElementsByTagName("img")[0],
thumbnailImages = document.getElementById("thumbnails").getElementsByTagName("img"),
j = 0;
let startTimer = function(){
stillTimer = setInterval(function(){
j = (j < 7) ? ++j : 0 ;
mainImage.src = thumbnailImages[j].src;
}, 10000);
}
startTimer();
for(i = 0 ; i < thumbnailImages.length ; i++){
thumbnailImages[i].addEventListener("click", function(evt){
clearInterval(stillTimer);
mainImage.src = evt.target.src;
++j;
startTimer();
});
};
})();
</script>
<div class="spec">
<div class="gallery-photos clearfix">
<div class="photo-thumbnails">
<div class="thumbnail current"><div class="thumbnail-inner">
<img src="../images/1.jpg" alt="" /></div></div>
<div class="thumbnail"><div class="thumbnail-inner">
<img src="../images/2.jpg" alt="" /></div></div>
<div class="thumbnail"><div class="thumbnail-inner">
<img src="../images/3.jpg" alt="" /></div></div>
<div class="thumbnail"><div class="thumbnail-inner">
<img src="../images/4.jpg" alt="" /></div></div>
<div class="thumbnail"><div class="thumbnail-inner">
<img src="../images/5.jpg" alt="" /></div></div>
<div class="thumbnail"><div class="thumbnail-inner">
<img src="../images/6.jpg" alt="" /></div></div>
<div class="thumbnail"><div class="thumbnail-inner">
<img src="../images/8.jpg" alt="" /></div></div>
<div class="thumbnail"><div class="thumbnail-inner">
<img src="../images/9.jpg" alt="" /></div></div>
</div>
<div id="big-photo" class="big-photo">
<img src="../images/1.jpg" alt="" /> </div>
</div>
</div>
<style>
.gallery-photos {padding: 1vw; width: 40vw; height:40vw; margin: 0 auto;}
.gallery-photos .big-photo {display: flex; padding: 0.3vw; border: 1vw solid burlywood; margin-right: 1vw; width: 35vw; height: 30vw;}
.gallery-photos .big-photo img {display: inline-flex; width: 35vw; height: 30vw; justify-content:left; border: inset 1vw solid burlywood;}
.gallery-photos .photo-thumbnails {display: inline-flex; flex-flow:row nowrap ; width: auto;}
.gallery-photos .photo-thumbnails .thumbnail {float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 5vw; height: 5vw;
cursor: pointer; padding: 0.1vw; border: 0.1vw solid skyblue; margin-left: 3.33333%; margin-bottom: 6px; opacity: 0.6; }
.gallery-photos .photo-thumbnails .thumbnail.current {opacity: 1; background-color: green;}
.gallery-photos .photo-thumbnails .thumbnail .thumbnail-inner { height: 100%; overflow: hidden;}
.gallery-photos .photo-thumbnails .thumbnail img { display: block; width: auto; max-height: 100%;
margin: 0 auto;}
</style>
<script>
$(document).ready(function(){
$(".photo-thumbnails .thumbnail").click(function() {
$('.photo-thumbnail .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
$('#big-photo img').attr('src', path);
});
})
</script>
<section class="gallery">
<h4>Gallery title here</h4>
<div>
<img src="../images/17.jpg" alt="">
<img src="../images/18.jpg" alt="">
<img src="../images/19.jpg" alt="">
<img src="../images/20.jpg" alt="">
<img src="../images/21.jpg" alt="">
<img src="../images/22.jpg" alt="">
<img src="../images/23.jpg" alt="">
<img src="../images/24.jpg" alt="">
<img src="../images/25.jpg" alt="">
</div>
</section>
<style>
.gallery > div {columns:5; gap:1vw; padding-top:1.25vw; }
.gallery img { display:block; width:100%; margin-bottom:1.25vw; }
@media (max-width:48vw) {
.gallery > div { columns:2;}
}
@media (max-width:32vw) {
.gallery > div { columns:1;}
}
</style>
Gap between images with value of 1vw
Row height with value of 10vw and column width with value of 15vw
<div class="gg-container">
<h3>Default format</h3>
<div class="gg-box">
<img src="../images/1.jpg">
<img src="../images/1a.jpg">
<img src="../images/1S.jpg">
<img src="../images/2.jpg">
<img src="../images/2a.jpg">
<img src="../images/2S.jpg">
<img src="../images/3.jpg">
<img src="../images/3a.jpg">
<img src="../images/3aa.jpg">
<img src="../images/3s.jpg">
<img src="../images/4.jpg">
<img src="../images/4a.jpg">
<img src="../images/4aa.jpg">
<img src="../images/4s.jpg">
</div>
<h3>Horizontal layout format</h3>
<div class="gg-box dark" id="horizontal">
<img src="../images/7a.jpg">
<img src="../images/7aa.jpg">
<img src="../images/8.jpg">
<img src="../images/8a.jpg">
<img src="../images/9.jpg">
<img src="../images/9a.jpg">
</div>
<h3>Square layout format</h3>
<div class="gg-box dark" id="square">
<img src="../images/9.jpg">
<img src="../images/9a.jpg">
<img src="../images/10.jpg">
<img src="../images/10a.jpg">
<img src="../images/11.jpg">
<img src="../images/11a.jpg">
<img src="../images/12.jpg">
<img src="../images/12a.jpg">
</div>
<h3>Customized Gap</h3>
<p>Gap between images with value of 1vw</p>
<div class="gg-box" id="gap">
<img src="../images/13a.jpg">
<img src="../images/14a.jpg">
<img src="../images/17.jpg">
<img src="../images/18.jpg">
<img src="../images/19.jpg">
<img src="../images/20.jpg">
</div>
<h3>Row Height and Column Width</h3>
<p>Row height with value of 10vw and column width with value of 15vw</p>
<div class="gg-box dark" id="heightWidth">
<img src="../images/21.jpg">
<img src="../images/22.jpg">
<img src="../images/23.jpg">
<img src="../images/24.jpg">
<img src="../images/25.jpg">
<img src="../images/26.jpg">
</div>
</div>
<style>
.gg-container { --main-color: #000; --secondary-color: #111; --txt-color: #fff; --img-bg-color: rgba(240, 240, 240, 0.9); --backdrop-color: rgba(240, 240, 240, 0.9); --gap-length: 2px; --row-height: 200px;
--column-width: 220px;}
.gg-container *[data-theme="dark"] { --main-color: #ddd; --secondary-color: #eee; --txt-color: #111; --img-bg-color: rgba(20, 20, 20, 0.9); --backdrop-color: rgba(30, 30, 30, 0.9); }
.gg-box {display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr)); grid-auto-rows: var(--row-height); grid-gap: var(--gap-length); margin: 1vw 0; }
.gg-box img {object-fit: cover; cursor: pointer; width: 100%; height: 100%; background: var(--img-bg-color);}
.gg-box img:hover {opacity: 0.98;}
#gap{gap: 1vw;}
.gg-box .dark{width: 15vw; height: 10vw;}
#gg-screen { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: var(--backdrop-color); z-index: 9999; text-align: center; }
#gg-screen .gg-image {height: 100%; display: inline-flex; justify-content: center; align-items: center;}
#gg-screen .gg-image img {max-width: 100%; max-height: 100%; margin: 0 auto;}
.gg-btn {width: 35px; height: 35px; background: var(--main-color); color: var(--txt-color); text-align: center; line-height: 35px; cursor: pointer; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease; transition: all 0.4s ease; font-size: 20px; box-sizing: border-box; padding-left: 2px; position: fixed;
bottom: 10px;}
.gg-btn:hover { background: var(--secondary-color); }
.gg-close {top: 10px;}
.gg-close, .gg-next { right: 10px;}
.gg-prev {right: 50px;}
.gg-prev,.gg-next {bottom: 10px;}
@media (min-width: 478px) {
.gg-box img:nth-child(2n):not(:last-of-type) {grid-row-end: span 2;}
[data-layout="horizontal"] img:nth-child(2n):not(:last-of-type) {grid-column-end: span 2; grid-row-end: span 1;}
[data-layout="square"] img:nth-child(2n):not(:last-of-type) {grid-row-end: span 1;grid-column-end: span 1;}
}
@media (max-width: 768px) {
.gg-box {grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: calc(var(--row-height) - 15vh); margin: 10px 0;}
}
@media (max-width: 450px) {
.gg-box {grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));}
}
</style>
<script>
const root = document.querySelector("body, html");
const container = document.querySelector('.gg-container');
const images = document.querySelectorAll(".gg-box > img");
const l = images.length;
for(var i = 0; i < l; i++) {
images[i].addEventListener("click", function(i) {
var currentImg = this;
const parentItem = currentImg.parentElement, screenItem = document.createElement('div');
screenItem.id = "gg-screen";
container.prepend(screenItem);
if (parentItem.hasAttribute('data-theme')) screenItem.setAttribute("data-theme", "dark");
var route = currentImg.src;
root.style.overflow = 'hidden';
screenItem.innerHTML = '<div class="gg-image"></div><div class="gg-close gg-btn">×</div><div class="gg-next gg-btn">→</div><div class="gg-prev gg-btn">←</div>';
const first = images[0].src, last = images[l-1].src;
const imgItem = document.querySelector(".gg-image"), prevBtn = document.querySelector(".gg-prev"), nextBtn = document.querySelector(".gg-next"), close = document.querySelector(".gg-close");
imgItem.innerHTML = '<img src="' + route + '">';
if (l > 1) {
if (route == first) {
prevBtn.hidden = true;
var prevImg = false;
var nextImg = currentImg.nextElementSibling;
}
else if (route == last) {
nextBtn.hidden = true;
var nextImg = false;
var prevImg = currentImg.previousElementSibling;
}
else {
var prevImg = currentImg.previousElementSibling;
var nextImg = currentImg.nextElementSibling;
}
}
else {
prevBtn.hidden = true;
nextBtn.hidden = true;
}
screenItem.addEventListener("click", function(e) {
if (e.target == this || e.target == close) hide();
});
root.addEventListener("keydown", function(e) {
if (e.keyCode == 37 || e.keyCode == 38) prev();
if (e.keyCode == 39 || e.keyCode == 40) next();
if (e.keyCode == 27 ) hide();
});
prevBtn.addEventListener("click", prev);
nextBtn.addEventListener("click", next);
function prev() {
prevImg = currentImg.previousElementSibling;
imgItem.innerHTML = '<img src="' + prevImg.src + '">';
currentImg = currentImg.previousElementSibling;
var mainImg = document.querySelector(".gg-image > img").src;
nextBtn.hidden = false;
prevBtn.hidden = mainImg === first;
};
function next() {
nextImg = currentImg.nextElementSibling;
imgItem.innerHTML = '<img src="' + nextImg.src + '">';
currentImg = currentImg.nextElementSibling;
var mainImg = document.querySelector(".gg-image > img").src;
prevBtn.hidden = false;
nextBtn.hidden = mainImg === last;
};
function hide() {
root.style.overflow = 'auto';
screenItem.remove();
};
});
}
</script>
<div class="demos">
<div class="demo__help">
<a>Choose a photo</a>
</div>
<div class="demo__gallery">
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
<div class="demo__placeholder"></div>
</div>
</div>
<style>
.demos{display: flex; width: 90vw; height: 100vh; align-items: center; justify-content: center; flex-direction: column; background: linear-gradient(60deg, #5b5893, #2c2a49);}
.demo__gallery {width: 688px; height: 460px; padding: 2px; flex-shrink: 0; background: #eee; perspective: 700px; border-radius: 5px;}
.demo__placeholder { width: 110px; height: 110px; margin: 2px; float: left; background-color: lightslategrey; border-radius: 5px;}
.demo__part {position: relative; float: left; width: 110px; height: 110px; margin: 2px; transform: rotateY(180deg); transform-style: preserve-3d; transition: all 0.3s ease-in-out;}
.demo__part:hover .demo__part-front {box-shadow: 0 0 10px black; transform: scale(0.96);}
.demo__part:hover .demo__part-front:after {opacity: 0;}
.demo__part-front, .demo__part-back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 5px;
cursor: pointer;}
.demo__part-front {background-color: lightslategrey; background-size: cover; background-position: center; transform: rotateX(0deg); transition: all 0.2s ease;}
.demo__part-front:after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; content: ""; opacity: 0.5; transition: all 0.2s ease; }
.demo__part-back {transform: rotateY(180deg) rotateX(0deg);}
.demo__part-back-inner {width: 680px; height: 452px; background-image: url(../images/1.jpg); background-size: cover; background-position: center;-webkit-backface-visibility: hidden;
backface-visibility: hidden;}
.demo__help { margin-bottom: 7px; font-size: 30px; font-family: "Yanone Kaffeesatz", sans-serif; color: white;}
.demo__help a {color: white;}
.demo__help a:hover {color: #e39999;}
.demo__part-1-1 .demo__part-back-inner {transform: translate(0px, 0px);}
.demo__part-1-2 .demo__part-back-inner {transform: translate(-114px, 0px);}
.demo__part-1-3 .demo__part-back-inner {transform: translate(-228px, 0px);}
.demo__part-1-4 .demo__part-back-inner {transform: translate(-342px, 0px);}
.demo__part-1-5 .demo__part-back-inner {transform: translate(-456px, 0px);}
.demo__part-1-6 .demo__part-back-inner {transform: translate(-570px, 0px);}
.demo__part-2-1 .demo__part-back-inner {transform: translate(0px, -114px);}
.demo__part-2-2 .demo__part-back-inner {transform: translate(-114px, -114px);}
.demo__part-2-3 .demo__part-back-inner {transform: translate(-228px, -114px);}
.demo__part-2-4 .demo__part-back-inner {transform: translate(-342px, -114px);}
.demo__part-2-5 .demo__part-back-inner {transform: translate(-456px, -114px);}
.demo__part-2-6 .demo__part-back-inner {transform: translate(-570px, -114px);}
.demo__part-3-1 .demo__part-back-inner {transform: translate(0px, -228px);}
.demo__part-3-2 .demo__part-back-inner {transform: translate(-114px, -228px);}
.demo__part-3-3 .demo__part-back-inner {transform: translate(-228px, -228px);}
.demo__part-3-4 .demo__part-back-inner {transform: translate(-342px, -228px);}
.demo__part-3-5 .demo__part-back-inner {transform: translate(-456px, -228px);}
.demo__part-3-6 .demo__part-back-inner {transform: translate(-570px, -228px);}
.demo__part-4-1 .demo__part-back-inner {transform: translate(0px, -342px);}
.demo__part-4-2 .demo__part-back-inner {transform: translate(-114px, -342px);}
.demo__part-4-3 .demo__part-back-inner {transform: translate(-228px, -342px);}
.demo__part-4-4 .demo__part-back-inner {transform: translate(-342px, -342px);}
.demo__part-4-5 .demo__part-back-inner {transform: translate(-456px, -342px);}
.demo__part-4-6 .demo__part-back-inner {transform: translate(-570px, -342px);}
.show-front {transform: none;}
</style>
<script>
"use strict";
$(document).ready(function() {
var rows = 4; //change this also in css
var cols = 6; //change this also in css
var staggerTime = 150;
var urls = [
"../images/1.jpg",
"../images/2.jpg",
"../images/3.jpg",
"../images/4.jpg",
"../images/5.jpg",
"../images/6.jpg",
"../images/7.jpg",
"../images/8.jpg",
"../images/9.jpg",
"../images/10.jpg",
"../images/11.jpg",
"../images/12.jpg",
"../images/13a.jpg",
"../images/14a.jpg",
"../images/8a.jpg",
"../images/9a.jpg",
"../images/17.jpg",
"../images/18.jpg",
"../images/19.jpg",
"../images/20.jpg",
"../images/21.jpg",
"../images/22.jpg",
"../images/23.jpg",
"../images/24.jpg",
];
var $gallery = $(".demo__gallery");
var $help = $(".demo__help");
var partsArray = [];
var reqAnimFr = (function() {
return window.requestAnimationFrame || function(cb) {
setTimeout(cb, 1000 / 60);
}
})();
$gallery.html('');
for (let row = 1; row <= rows; row++) {
partsArray[row - 1] = [];
for (let col = 1; col <= cols; col++) {
$gallery.append(`<div class="show-front demo__part demo__part-${row}-${col}" row="${row}" col="${col}"><div class="demo__part-back"><div class="demo__part-back-inner"></div></div><
div class="demo__part-front"></div></div>`);
partsArray[row - 1][col - 1] = new Part();
}
}
var $parts = $(".demo__part");
var $image = $(".demo__part-back-inner");
var help = true;
for (let i = 0; i < $parts.length; i++) {
$parts.find(".demo__part-front").eq(i).css("background-image", `url(${urls[i]})`);
}
$gallery.on("click", ".demo__part-front", function() {
$image.css("background-image", $(this).css("background-image"));
if (help) {
$help.html("Click any of the tiles to get back");
help = false;
}
let row = +$(this).closest(".demo__part").attr("row");
let col = +$(this).closest(".demo__part").attr("col");
waveChange(row, col);
});
$gallery.on("click", ".demo__part-back", function() {
if (!isShowingBack()) return;
for (let row = 1; row <= rows; row++) {
for (let col = 1; col <= cols; col++) {
partsArray[row - 1][col - 1].showing = "front";
}
}
}, staggerTime + $parts.length * staggerTime / 10);
showFront(0, $parts.length);
});
function showFront(i, maxI) {
if (i >= maxI) return;
$parts.eq(i).addClass("show-front");
reqAnimFr(function() {
showFront(i + 1);
});
}
function isShowingBack() {
return partsArray[0][0].showing == "back" && partsArray[0][cols - 1].showing == "back" && partsArray[rows - 1][0].showing == "back" && partsArray[rows - 1][cols - 1].showing == "back";
}
function Part() {
this.showing = "front";
}
function waveChange(rowN, colN) {
if (rowN > rows || colN > cols || rowN <= 0 || colN <= 0) return;
if (partsArray[rowN - 1][colN - 1].showing == "back") return;
$(".demo__part-" + rowN + "-" + colN).removeClass("show-front");
partsArray[rowN - 1][colN - 1].showing = "back";
setTimeout(function() {
waveChange(rowN + 1, colN);
waveChange(rowN - 1, colN);
waveChange(rowN, colN + 1);
waveChange(rowN, colN - 1);
}, staggerTime);
}
});
</script>
<div class="gallery_X">
<div class="img-w">
<img src="../images/1a.jpg" alt="" />
</div>
<div class="img-w"><img src="../images/9a.jpg" alt="" /></div>
<div class="img-w"><img src="../images/2a.jpg" alt="" /></div>
<div class="img-w"><img src="../images/3a.jpg" alt="" /></div>
<div class="img-w"><img src="../images/4a.jpg" alt="" /></div>
<div class="img-w"><img src="../images/5a.jpg" alt="" /></div>
<div class="img-w"><img src="../images/6a.jpg" alt="" /></div>
<div class="img-w"><img src="../images/7a.jpg" alt="" /></div>
<div class="img-w"><img src="../images/8a.jpg"alt="" /></div>
</div>
<style>
.gallery_X {width: 600px; margin: auto; border-radius: 3px; overflow: hidden;}
.img-c {width: 200px; height: 200px; float: left; position: relative; overflow: hidden;}
.img-w { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; cursor: pointer; transition: transform ease-in-out 300ms;}
.img-w img {display: none;}
.img-c {transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;}
.img-c:hover .img-w {transform: scale(1.08); transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;}
.img-c.active { width: 100% !important; height: 100% !important; position: absolute; z-index: 2; }
.img-c.postactive { position: absolute; z-index: 2; pointer-events: none;}
.img-c.active.positioned {left: 0 !important; top: 100 !important; transition-delay: 50ms;}
</style>
<script>
$(function() {
$(".img-w").each(function() {
$(this).wrap("<div class='img-c'></div>")
let imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
})
$(".img-c").click(function() {
let w = $(this).outerWidth()
let h = $(this).outerHeight()
let x = $(this).offset().left
let y = $(this).offset().top
$(".active").not($(this)).remove()
let copy = $(this).clone();
copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
$(".active").css('top', y - 8);
$(".active").css('left', x - 8);
setTimeout(function() {
copy.addClass("positioned")
}, 0)
})
})
$(document).on("click", ".img-c.active", function() {
let copy = $(this)
copy.removeClass("positioned active").addClass("postactive")
setTimeout(function() {
copy.remove();
}, 500)
})
</script>