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

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:
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:
 
 
varshagumber28
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.