Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Difficulty Level : Easy
  • Last Updated : 12 Oct, 2021

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

HTML:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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




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



  • 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




<style type="text/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;
    }
</style>


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

Javascript




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


Final Code:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style type="text/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;
        }
    </style>
</head>
 
<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>
 
    <script type="text/javascript">
        const change = src => {
            document.getElementById('main').src = src
        }
    </script>
</body>
 
</html>


 

 

Output:

 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :