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 Tab Image Gallery?
Creating a tab image gallery is a great way to showcase a collection of images on a website. By following the steps outlined in this tutorial, you can easily create a tab image gallery using HTML, CSS, and JavaScript. This gallery can be used to display various images, such as photographs, artwork, or even product images. With a little bit of creativity and customization, you can make the gallery look and function just the way you want it to.
Step 1: Create the HTML Structure
The HTML structure must be created first in order to construct a tab picture gallery. A div element will be used to build the gallery's main container, and ul elements will be used to generate the tabs. We'll make the individual photos for each tab using a li element.
<body>
<div id="tabbed-nav">
<div class="tab active" data-target="tab-1">Tab 1</div>
<div class="tab" data-target="tab-2">Tab 2</div>
<div class="tab" data-target="tab-3">Tab 3</div>
</div>
<div id="tabbed-content">
<div id="tab-1" class="images active">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
<img src="https://picsum.photos/id/156/200/300" alt="image 2">
<img src="https://picsum.photos/id/10/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
<div id="tab-2" class="images">
<img src="https://picsum.photos/id/114/200/300" alt="image 1">
<img src="https://picsum.photos/id/158/200/300" alt="image 2">
<img src="https://picsum.photos/id/100/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
<div id="tab-3" class="images">
<img src="https://picsum.photos/id/12/200/300" alt="image 1">
<img src="https://picsum.photos/id/15/200/300" alt="image 2">
<img src="https://picsum.photos/id/107/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
</div>
</body>
In the above code, we have created a div element with the class tab-gallery as the main container for the gallery. Inside that, we have a ul element with the class tabs to create the tabs. Each li element within the ul element represents an individual tab. The tab-content div element contains the images displayed when each tab is clicked. Each tab-pane div element within the tab-content div contains an img element that displays the individual images.
Step 2: Add CSS Styles
The next step is to add CSS styles to the HTML structure to make the gallery look presentable. We will use CSS to style the tabs and the images.
<style>
/* CSS for the tabbed navigation */
.tab {
display: inline-block;
padding: 10px 15px;
margin-right: 10px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab.active {
border-bottom: 2px solid black;
}
/* CSS for the image gallery */
.images {
display: none;
}
.images.active {
display: flex;
flex-wrap: wrap;
}
.images img {
flex: 1;
margin: 10px;
}
</style>
In the above CSS, we have set the width of the tab-gallery div to 800px and centered it on the page. We have also removed the default list style from the tabs ul element and set its display to flex. This allows us to easily align the tabs horizontally. We have also set the cursor to pointer for the tab class, so that the user knows that the tabs are clickable.
We have also added a background color to the tab.active class so that the active tab is highlighted. And we have also set the tab-content to be hidden by default, and only display the tab-pane that corresponds to the active tab.
Step 3: Add JavaScript Functionality
Finally, we need to add JavaScript functionality to the gallery so that it can change the images when the user clicks on a tab. We will use jQuery to make it easier to manipulate the DOM and add event listeners.
<script>
// JavaScript to handle tabbed navigation
const tabs = document.querySelectorAll('.tab');
const images = document.querySelectorAll('.images');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Remove active class from all tabs
tabs.forEach(tab => tab.classList.remove('active'));
// Add active class to clicked tab
tab.classList.add('active');
// Hide all image galleries
images.forEach(image => image.classList.remove('active'));
// Show image gallery associated with clicked tab
const target = tab.getAttribute('data-target');
document.getElementById(target).classList.add('active');
});
});
</script>
The ready method is used in the code above to ensure that JavaScript only executes when the DOM has fully loaded. The tab class is also getting a click event listener, which is activated whenever a tab is clicked. We start by removing the active class from every tab and tab-pane inside the event listener. The clicked tab and the associated tab-pane will then both receive the active class.
Example
<html>
<head>
<style>
.tab {
display: inline-block;
padding: 10px 15px;
margin-right: 10px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab.active {
border-bottom: 2px solid black;
}
.images {
display: none;
}
.images.active {
display: flex;
flex-wrap: wrap;
}
.images img {
flex: 1;
margin: 10px;
}
</style>
</head>
<body>
<div id="tabbed-nav">
<div class="tab active" data-target="tab-1">Tab 1</div>
<div class="tab" data-target="tab-2">Tab 2</div>
<div class="tab" data-target="tab-3">Tab 3</div>
</div>
<div id="tabbed-content">
<div id="tab-1" class="images active">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
<img src="https://picsum.photos/id/156/200/300" alt="image 2">
<img src="https://picsum.photos/id/10/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
<div id="tab-2" class="images">
<img src="https://picsum.photos/id/114/200/300" alt="image 1">
<img src="https://picsum.photos/id/158/200/300" alt="image 2">
<img src="https://picsum.photos/id/100/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
<div id="tab-3" class="images">
<img src="https://picsum.photos/id/12/200/300" alt="image 1">
<img src="https://picsum.photos/id/15/200/300" alt="image 2">
<img src="https://picsum.photos/id/107/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
</div>
<script>
// JavaScript to handle tabbed navigation
const tabs = document.querySelectorAll('.tab');
const images = document.querySelectorAll('.images');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Remove active class from all tabs
tabs.forEach(tab => tab.classList.remove('active'));
// Add active class to clicked tab
tab.classList.add('active');
// Hide all image galleries
images.forEach(image => image.classList.remove('active'));
// Show image gallery associated with clicked tab
const target = tab.getAttribute('data-target');
document.getElementById(target).classList.add('active');
});
});
</script>
</body>
</html>
It's important to note that we need to add a data attribute to each tab li element that corresponds to the ID of the tab-pane that it is linked to.
2K+ Views
