Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 15 Oct, 2020

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




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

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

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

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :