How to preview Image on click in Gallery View using HTML, CSS and JavaScript ?

Last Updated : 22 Dec, 2023

In this article, we see how easily we can create an Image Gallery with a preview feature using HTML, CSS, and some JavaScript.

Approach

Create a div with a class container.
Create two more div inside the first div one for the main view and the other for the side view with classes main_view and side_view.
Inside the main view insert one image tag with the id main.
Inside the side view insert all other images of the gallery with function change and pass the src of the image to function.
Give width and margin to a container.
Give the height and width to a main_view.
Set the dimensions of the image in the main_view.
Set side_view to display all images in proper dimensions using flex.
Using the change function we will just replace the src of main_view with the source of the clicked image.

Example: This example shows the implementation of the above-explained approach.

Javascript

const change = src => {
    document.getElementById('main').src = src
}

HTML

<!DOCTYPE html>
<html>
 
<body>
      <!-- Container for our gallery -->
    <div class="container">
        <!-- Main view of our gallery -->
        <div class="main_view">
            <img src="one.jpg" id="main" alt="IMAGE">
        </div>
 
        <!-- All images with side view -->
        <div class="side_view">
            <img src="one.jpg" onclick="change(this.src)">
            <img src="two.jpg" onclick="change(this.src)">
            <img src="three.jpg" onclick="change(this.src)">
            <img src="four.jpg" onclick="change(this.src)">
        </div>
    </div>
</body>
   
</html>

CSS

/*Setting Basic Dimensions to give 
    gallery view */
.container {
    margin: 0 auto;
    width: 90%;
}
 
.main_view {
    width: 80%;
    height: 25rem;
}
 
.main_view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
.side_view {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
 
.side_view img {
    width: 9rem;
    height: 7rem;
    object-fit: cover;
    cursor: pointer;
    margin: 0.5rem;
}