Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a tabbed image gallery with CSS and JavaScript?
Image gallery on a web page can be displayed in various forms. One of them is a tabbed image gallery. On clicking the image thumbnail from the image gallery, the image expands. Let us see how to create a tabbed image gallery with HTML and CSS.
Set the images for the thumbnail
For our example, we have considered 3 images and added to the web page using the <img> element −
<img class="ImgThumbnail" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg"/> <img class="ImgThumbnail" src="https://www.tutorialspoint.com/sql/images/sql-mini-logo.jpg" /> <img class="ImgThumbnail" src="https://www.tutorialspoint.com/sqlite/images/sqlite-mini-logo.jpg"/>
Image Thumbnail
When the mouse cursor is placed on the image, the image thumbnail will appear as clickable because we have set the cursor property to pointer. The transition is set using the transition property. Here are the other styles for the image thumbnail −
.ImgThumbnail {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
height: 250px;
width: 250px;
}
Create a modal
On clicking any of the image thumbnails, the image will open −
<div class="modal"> <span class="close">×</span> <img class="modalImage" id="img01" /> </div>
The close button for the modal
When the image thumbnail is clicking, the modal opens. On that full-size image, a close button is also visible to close the image −
<span class="close">×</span>
The script for the modal to work
On clicking the image thumbnail, the event listener will allow displaying the image. On clicking the close button, the same modal image will close because the display property it set to none −
<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
</script>
Example
The following is the code to produce a tabbed image gallery with CSS and JavaScript −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.ImgThumbnail {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
height: 250px;
width: 250px;
}
.ImgThumbnail:nth-of-type(1) {
margin-left: 20%;
}
.modal {
display: none;
position: relative;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 60%;
overflow: auto;
}
.modalImage {
margin: auto;
display: block;
width: 50%;
height: 60%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.close {
font-weight: bolder;
position: absolute;
right: 25%;
color: #ffffff;
font-size: 40px;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: rgb(255, 0, 0);
cursor: pointer;
}
@media only screen and (max-width: 700px) {
.modalImage {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Image Modal Gallery Example</h1>
<img class="ImgThumbnail" src="https://images.pexels.com/photos/3635300/pexels-photo-3635300.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<img class="ImgThumbnail" src="https://picsum.photos/id/237/536/354.jpg" />
<img class="ImgThumbnail" src="https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<!-- The Modal -->
<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01" />
</div>
<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
</script>
</body>
</html>
524 Views
