Learn How to Create a Tabbed Image Gallery with CSS and JavaScript
Solution with Code:
The solution consists of three files: HTML, CSS, and JavaScript. Below is the structure and content for each of them.
1. HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Learn How to Create a Tabbed Image Gallery with CSS and JavaScript">
<meta name="description" content="Discover how to create a tabbed image gallery with CSS and JavaScript. This tutorial will show you how to display images in a tabbed layout, providing a smooth and interactive browsing experience.">
<meta name="keywords" content="Tabbed Image Gallery, CSS Image Gallery, JavaScript Gallery, Tabbed Gallery, Web Development, HTML Gallery, CSS and JavaScript Tutorial, Interactive Image Gallery, Tabbed Layout, Web Design, JavaScript Tutorial">
<title>Tabbed Image Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 style="text-align:center;">Tabbed Image Gallery</h2>
<p style="text-align:center;">Click the tabs to view the different sets of images.</p>
<!-- Tab Links -->
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Nature')">Nature</button>
<button class="tablinks" onclick="openTab(event, 'City')">City</button>
<button class="tablinks" onclick="openTab(event, 'Animals')">Animals</button>
</div>
<!-- Tab Content -->
<div id="Nature" class="tabcontent">
<img src="nature1.jpg" alt="Nature Image 1" class="gallery-img">
<img src="nature2.jpg" alt="Nature Image 2" class="gallery-img">
<img src="nature3.jpg" alt="Nature Image 3" class="gallery-img">
</div>
<div id="City" class="tabcontent">
<img src="city1.jpg" alt="City Image 1" class="gallery-img">
<img src="city2.jpg" alt="City Image 2" class="gallery-img">
<img src="city3.jpg" alt="City Image 3" class="gallery-img">
</div>
<div id="Animals" class="tabcontent">
<img src="animals1.jpg" alt="Animal Image 1" class="gallery-img">
<img src="animals2.jpg" alt="Animal Image 2" class="gallery-img">
<img src="animals3.jpg" alt="Animal Image 3" class="gallery-img">
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS (styles.css):
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h2 {
margin-top: 20px;
text-align: center;
}
p {
text-align: center;
}
/* Tab Container */
.tab {
display: flex;
justify-content: center;
background-color: #333;
}
/* Tab Button */
.tablinks {
background-color: #333;
color: white;
border: none;
padding: 14px 20px;
cursor: pointer;
font-size: 17px;
width: 33.33%;
text-align: center;
}
.tablinks:hover {
background-color: #ddd;
color: black;
}
.tablinks.active {
background-color: #666;
}
/* Tab Content */
.tabcontent {
display: none;
text-align: center;
padding: 20px;
}
.gallery-img {
width: 90%;
max-width: 400px;
margin: 10px;
border-radius: 8px;
transition: transform 0.3s ease;
}
.gallery-img:hover {
transform: scale(1.1);
}
/* Make Images Responsive */
@media screen and (max-width: 600px) {
.gallery-img {
width: 100%;
}
}
3. JavaScript (script.js):
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
// Hide all tab contents
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove "active" class from all tab links
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
// Display the clicked tab content and add "active" class to the clicked tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.classList.add("active");
}
// Set default active tab
document.getElementsByClassName("tablinks")[0].click();
Explanation of Code:
1. HTML (index.html):
- The HTML code sets up a basic structure for the Tabbed Image Gallery.
- Tabs: There are three buttons (
Nature,City,Animals) which act as tabs for different categories of images. Each tab is linked to a specific image category. - Tab Content: Each
divinsidetabcontentcontains a set of images. These images will only be displayed when the respective tab is selected. - A link to the external CSS file is included in the
<head>, and the JavaScript file is linked before the closing</body>tag.
- Tabs: There are three buttons (
2. CSS (styles.css):
- General Styling: Basic styles for the page and text alignment are added.
- Tabs:
- The tabs are displayed as buttons with
tablinksclass. They are styled with background color, padding, and a hover effect. - When a tab is selected, it gets an “active” class to change its background color.
- The tabs are displayed as buttons with
- Tab Content: The content of each tab (images) is hidden initially using
display: none;. Only the content of the selected tab will be visible. - Images: The images inside each tab are styled to be responsive and have a hover effect that slightly enlarges them.
- Media Query: For small screens, the images adjust to fit the screen width.
3. JavaScript (script.js):
- openTab function:
- This function is triggered when a tab is clicked.
- It hides all the tab contents (
display: none) and removes the “active” class from all the tab buttons. - The content of the clicked tab is displayed (
display: block), and the corresponding tab button receives the “active” class.
- Default Tab: The first tab is automatically opened when the page loads using
click()on the first tab button.
How It Works:
- When the page loads, the first tab (Nature) is displayed by default.
- Clicking on any of the tabs (
Nature,City,Animals) will show the corresponding images and hide the others. - The images are responsive, and when the user hovers over them, they will slightly zoom in for a more interactive effect.