How to preview Image on click in Gallery View using HTML, CSS and JavaScript ?
Last Updated :
22 Dec, 2023
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 >
< div class = "container" >
< div class = "main_view" >
< img src = "one.jpg" id = "main" alt = "IMAGE" >
</ div >
< 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
.container {
margin : 0 auto ;
width : 90% ;
}
.main_view {
width : 80% ;
height : 25 rem;
}
.main_view img {
width : 100% ;
height : 100% ;
object-fit: cover;
}
.side_view {
display : flex;
justify- content : center ;
flex-wrap: wrap;
}
.side_view img {
width : 9 rem;
height : 7 rem;
object-fit: cover;
cursor : pointer ;
margin : 0.5 rem;
}
|
Output: Click here to see the live Output.
Share your thoughts in the comments
Please Login to comment...