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>
<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: 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.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
17 Jan, 2023
Like Article
Save Article