Galería interactiva básica en Vanilla JavaScript

Vista prévia

Descripción

Un script ligero para crear una galería interactiva en la que puede navegar entre las imágenes haciendo clic en las miniaturas.

Funcionamiento

Inserte miniaturas y la primera imagen en la Galería como estas:

<div class="container">

<div class="panel-main">


<img src="https://picsum.photos/1920/1200?image=797" id="selected">

</div>


<div class="thumbs">


<img src="https://picsum.photos/1920/1200?image=797">


<img src="https://picsum.photos/1920/1200?image=777">


<img src="https://picsum.photos/1920/1200?image=755">


<img src="https://picsum.photos/1920/1200?image=838">


<img src="https://picsum.photos/1920/1200?image=839">

</div>
</div>

Estilo de la galería y hacer que sea sensible usando CSS Flexbox:

.container {

max-width: 800px;

margin: auto;

border: white solid 5px;

background-color: white;
}

.panel-main img, .thumbs img {

width: 100%;

height: auto;
}

.thumbs {

display: grid;

grid-template-columns: repeat(5, 1fr);

grid-gap: 5px;
}

Aplique una animación de desvanecimiento a la Galería cuando cambie entre imágenes.

@keyframes
 fadeIn {
to {
 opacity: 1;
}
}

.fade-in {

opacity: 0;

animation: fadeIn 0.5s ease-in 1 forwards;
}

El JavaScript para activar la galería.

const current = document.querySelector("#selected");
const thumbs = document.querySelectorAll(".thumbs img");
const opacity = 0.5;

// Set opacity of first image
thumbs[0].style.opacity = opacity;

thumbs.forEach(img => img.addEventListener("click", imgActivate));

function imgActivate(e) {

// Reset opacity on all thumbs

thumbs.forEach(img => (img.style.opacity = 1));


// Change current image to source of clicked image

current.src = e.target.src;


// Add fadeIn class

current.classList.add("fade-in");


// Remove fadeIn class after animation time elapsed

setTimeout(() => current.classList.remove("fade-in"), 500);


// Change opacity to variable value

e.target.style.opacity = opacity;
}