Learn How to Create a Tabbed Image Gallery with CSS and JavaScript

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 inside tabcontent 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.

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.
  • 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:

  1. When the page loads, the first tab (Nature) is displayed by default.
  2. Clicking on any of the tabs (Nature, City, Animals) will show the corresponding images and hide the others.
  3. The images are responsive, and when the user hovers over them, they will slightly zoom in for a more interactive effect.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top