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:

My Personal Notes

Related Articles

HTML

HTML

Javascript

HTML