Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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

Approach: We will follow the below-described 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.

JavaScript: Using the change function we will just replace the src of main_view with the source of the clicked image.


<!DOCTYPE html>
      <!-- Container for our gallery -->
    <div class="container">
        <!-- Main view of our gallery -->
        <div class="main_view">
            <img src="one.jpg" id="main" alt="IMAGE">
        <!-- 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)">


/*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;


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

Output: Click here to see the live Output.

My Personal Notes arrow_drop_up
Last Updated : 17 Jan, 2023
Like Article
Save Article
Similar Reads
Related Tutorials