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

Last Updated : 18 Apr, 2025

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.

HTML `

    <!-- 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>

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; }

JavaScript

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

`

**Output:

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