How to Create a Tab Image Gallery?

Creating a tab image gallery is a great way to showcase collections of images on a website. This tutorial will guide you through building a fully functional tab gallery using HTML, CSS, and JavaScript. Each tab will display a different set of images, making it perfect for organizing photos, artwork, or product galleries.

Step 1: Create the HTML Structure

First, we need to create the HTML structure for our tab gallery. We'll use a container div for the tabs and another container for the image content areas.

<div id="tabbed-nav">
   <div class="tab active" data-target="tab-1">Nature</div>
   <div class="tab" data-target="tab-2">Architecture</div>
   <div class="tab" data-target="tab-3">Animals</div>
</div>

<div id="tabbed-content">
   <div id="tab-1" class="images active">
      <img src="https://picsum.photos/id/110/200/300" alt="Nature 1">
      <img src="https://picsum.photos/id/156/200/300" alt="Nature 2">
      <img src="https://picsum.photos/id/10/200/300" alt="Nature 3">
      <img src="https://picsum.photos/id/1015/200/300" alt="Nature 4">
   </div>
   
   <div id="tab-2" class="images">
      <img src="https://picsum.photos/id/114/200/300" alt="Architecture 1">
      <img src="https://picsum.photos/id/158/200/300" alt="Architecture 2">
      <img src="https://picsum.photos/id/100/200/300" alt="Architecture 3">
      <img src="https://picsum.photos/id/1080/200/300" alt="Architecture 4">
   </div>
   
   <div id="tab-3" class="images">
      <img src="https://picsum.photos/id/12/200/300" alt="Animals 1">
      <img src="https://picsum.photos/id/15/200/300" alt="Animals 2">
      <img src="https://picsum.photos/id/107/200/300" alt="Animals 3">
      <img src="https://picsum.photos/id/1025/200/300" alt="Animals 4">
   </div>
</div>

Each tab has a data-target attribute that corresponds to the ID of its associated image container. The first tab and image container have the active class to show them by default.

Step 2: Add CSS Styles

Next, we'll add CSS to style our tabs and create the gallery layout. The CSS handles tab appearance, image positioning, and the show/hide functionality.

<style>
   #tabbed-nav {
      margin-bottom: 20px;
      border-bottom: 1px solid #ddd;
   }
   
   .tab {
      display: inline-block;
      padding: 12px 20px;
      margin-right: 5px;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      background-color: #f8f9fa;
      border-radius: 5px 5px 0 0;
      transition: all 0.3s ease;
   }
   
   .tab:hover {
      background-color: #e9ecef;
   }
   
   .tab.active {
      border-bottom: 3px solid #007bff;
      background-color: white;
      font-weight: bold;
   }
   
   .images {
      display: none;
      gap: 15px;
      padding: 20px 0;
   }
   
   .images.active {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
   }
   
   .images img {
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
   }
   
   .images img:hover {
      transform: scale(1.05);
   }
</style>

The CSS includes hover effects for both tabs and images, making the gallery more interactive. Images scale slightly when hovered, and tabs change background color.

Step 3: Add JavaScript Functionality

Finally, we'll add JavaScript to handle the tab switching functionality. The script listens for clicks on tabs and shows the corresponding image gallery.

<script>
   // Get all tabs and image containers
   const tabs = document.querySelectorAll('.tab');
   const imageContainers = document.querySelectorAll('.images');
   
   // Add click event listener to each tab
   tabs.forEach(tab => {
      tab.addEventListener('click', () => {
         // Remove active class from all tabs
         tabs.forEach(t => t.classList.remove('active'));
         
         // Add active class to clicked tab
         tab.classList.add('active');
         
         // Hide all image galleries
         imageContainers.forEach(container => {
            container.classList.remove('active');
         });
         
         // Show the target image gallery
         const targetId = tab.getAttribute('data-target');
         const targetContainer = document.getElementById(targetId);
         targetContainer.classList.add('active');
      });
   });
</script>

The JavaScript uses querySelectorAll to get all tabs and image containers, then adds event listeners to handle the switching logic when tabs are clicked.

Complete Example

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: Arial, sans-serif;
         max-width: 800px;
         margin: 50px auto;
         padding: 20px;
      }
      
      #tabbed-nav {
         margin-bottom: 20px;
         border-bottom: 1px solid #ddd;
      }
      
      .tab {
         display: inline-block;
         padding: 12px 20px;
         margin-right: 5px;
         cursor: pointer;
         border-bottom: 3px solid transparent;
         background-color: #f8f9fa;
         border-radius: 5px 5px 0 0;
         transition: all 0.3s ease;
      }
      
      .tab:hover {
         background-color: #e9ecef;
      }
      
      .tab.active {
         border-bottom: 3px solid #007bff;
         background-color: white;
         font-weight: bold;
      }
      
      .images {
         display: none;
         gap: 15px;
         padding: 20px 0;
      }
      
      .images.active {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
      
      .images img {
         border-radius: 8px;
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         transition: transform 0.3s ease;
      }
      
      .images img:hover {
         transform: scale(1.05);
      }
   </style>
</head>
<body>
   <h1>Tab Image Gallery</h1>
   
   <div id="tabbed-nav">
      <div class="tab active" data-target="tab-1">Nature</div>
      <div class="tab" data-target="tab-2">Architecture</div>
      <div class="tab" data-target="tab-3">Animals</div>
   </div>

   <div id="tabbed-content">
      <div id="tab-1" class="images active">
         <img src="https://picsum.photos/id/110/200/300" alt="Nature 1">
         <img src="https://picsum.photos/id/156/200/300" alt="Nature 2">
         <img src="https://picsum.photos/id/10/200/300" alt="Nature 3">
         <img src="https://picsum.photos/id/1015/200/300" alt="Nature 4">
      </div>
      
      <div id="tab-2" class="images">
         <img src="https://picsum.photos/id/114/200/300" alt="Architecture 1">
         <img src="https://picsum.photos/id/158/200/300" alt="Architecture 2">
         <img src="https://picsum.photos/id/100/200/300" alt="Architecture 3">
         <img src="https://picsum.photos/id/1080/200/300" alt="Architecture 4">
      </div>
      
      <div id="tab-3" class="images">
         <img src="https://picsum.photos/id/12/200/300" alt="Animals 1">
         <img src="https://picsum.photos/id/15/200/300" alt="Animals 2">
         <img src="https://picsum.photos/id/107/200/300" alt="Animals 3">
         <img src="https://picsum.photos/id/1025/200/300" alt="Animals 4">
      </div>
   </div>

   <script>
      const tabs = document.querySelectorAll('.tab');
      const imageContainers = document.querySelectorAll('.images');
      
      tabs.forEach(tab => {
         tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            
            imageContainers.forEach(container => {
               container.classList.remove('active');
            });
            
            const targetId = tab.getAttribute('data-target');
            document.getElementById(targetId).classList.add('active');
         });
      });
   </script>
</body>
</html>

Key Features

This tab gallery includes several important features:

• Responsive Design: Images flex and wrap on smaller screens
• Smooth Transitions: CSS transitions provide smooth hover effects
• Accessible: Proper alt attributes and semantic HTML structure
• Customizable: Easy to modify colors, sizes, and add more tabs

Conclusion

This tab image gallery provides an effective way to organize and display multiple image collections on a single page. The combination of HTML structure, CSS styling, and JavaScript functionality creates a professional, interactive gallery that's both user-friendly and easily customizable for different projects.