How to preview Image on click in Gallery View using HTML, CSS and JavaScript ?
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 > |
chevron_right
filter_none
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 : 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; } </style> |
chevron_right
filter_none
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 } |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output: