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

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

HTML:

  • 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 id main.
  • Inside the side view insert all other images of the gallery with function change and pass src of the image to function. 

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
      <!-- Container for our gallery -->
    <div class="container">
        <!-- Main view of our gallary -->
        <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>

chevron_right


CSS:

  • Give width and margin to a container.
  • Give the height and width to a main_view.
  • Set dimensions of the image in the main_view.
  • Set side_view to display all images in proper dimensions using flex.

HTML



filter_none

edit
close

play_arrow

link
brightness_4
code

<style type="text/css">
    /*Setting Basic Dimensions to give 
    gallary 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;
    }
</style>

chevron_right


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

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Final Code:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css">
        /*Setting Basic Dimensions to give 
        gallary 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;
        }
    </style>
</head>
  
<body>
    <!-- Container for our gallery -->
    <div class="container">
          
        <!-- Main view of our gallary -->
        <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>
  
    <script type="text/javascript">
        const change = src => {
            document.getElementById('main').src = src
        }
    </script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.