Skip to content

Instantly share code, notes, and snippets.

@wishsagarks
Created April 25, 2022 05:08
Show Gist options
  • Save wishsagarks/fc977c8f1f6e831336c10d919a5c7453 to your computer and use it in GitHub Desktop.
Save wishsagarks/fc977c8f1f6e831336c10d919a5c7453 to your computer and use it in GitHub Desktop.
Javascript Image gallery
<div class="container">
<div class="main-img">
<img src="https://picsum.photos/id/1015/800/500" alt="" id="current">
</div>
<div class="imgs">
<img src="https://picsum.photos/id/1015/800/500" alt="">
<img src="https://picsum.photos/id/1055/800/500" alt="">
<img src="https://picsum.photos/id/1065/800/500" alt="">
<img src="https://picsum.photos/id/1045/800/500" alt="">
</div>
</div>
const current = document.querySelector('#current');
const imgs = document.querySelectorAll('.imgs img');
const opacity = 0.4;
imgs[0].style.opacity = opacity;
imgs.forEach(img => img.addEventListener('click', imgClick));
function imgClick (e) {
imgs.forEach(img => (img.style.opacity = 1));
current.src = e.target.src;
current.classList.add('fade-in');
setTimeout(() => current.classList.remove('fade-in'), 500);
e.target.style.opacity = opacity;
}
* {
margin: 0;
padding: 0;
outline: none;
}
body {
background: #333;
margin: 20px;
}
.container {
max-width: 70%;
margin: auto;
border: 3px solid #fff;
background-color: #fff;
}
.main-img img,
.imgs img {
width: 100%;
}
.imgs {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
cursor: pointer;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadeIn 0.5s ease-in 1 forwards;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment