Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 17 Jan, 2023
Improve Article
Save 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

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

CSS:

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

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




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


Javascript




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


Output: Click here to see the live Output.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!