Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

Approach

  • 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.
  • 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.
  • Using the change function we will just replace the src of main_view with the source of the clicked image.

Example: This example shows the implementation of the above-explained approach.

Javascript

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

                    

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

                    

Output: Click here to see the live Output.



Last Updated : 22 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads