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
div
insidetabcontent
contains 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
tablinks
class. 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.