Create an Image Gallery to view it in a Modal in Tailwind CSS

Last Updated : 21 Feb, 2024

Modals are like pop-up windows that show content without navigating away from the page. By putting your image gallery in a modal, you give visitors a clear view of your images without any distractions. With Tailwind CSS, you can quickly set up and customize modal-based image galleries, making your website more engaging and user-friendly.

Preview

Preview

Prerequisites

Approach

Firstly, Integrate Tailwind CSS CDN Links. Use utility classes for Text Styling, use “text-center” to center your text horizontally, “text-3xl” and “text-xl” to make it extra-large, and “text-green-600” or “text-blue-600” to add colorful accents.
Make the Grid Layout using utilities, grid-cols-3 divides the grid into three equal columns and gap-5 adds a gap of size 5 between grid items using Tailwind’s gap utilities.
For image styling, utilize Tailwind CSS’s “w-full” and “h-full” utilities to set the image width and height to 100% of its parent container. Ensure the image covers the entire container while maintaining its aspect ratio with “object-cover”.
For styling modal use use the utilities including hidden for initially hiding the modal container using Tailwind’s visibility utilities, fixed sets the positions of the modal container relative to the viewport, top-0, left-0 sets the positions of the modal container at the top-left corner of the viewport.
And, z-80 sets the z-index of the modal container to 80, ensuring it appears above other elements bg-black/70 sets the background color of the modal container to black with 70% opacity and flex, justify-center, items-center centers the modal content both horizontally and vertically using Tailwind’s flexbox utilities.
The function showModal(src) is called when a small image is clicked, the model is hidden by default, for the hidden utility class. So we remove it when an img is clicked.
Then when a user clicks on the close button add the hidden class to hide it. function close modal () function is called when the close button is clicked.

Example: The example below illustrates the implementation of an image gallery to view it in a modal in Tailwind CSS.

HTML

<!doctype html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"
          content="ie=edge">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Geeksforgeeks Image Gallery</title>
</head>
 
<body>
    <h1 class="mt-10 mb-5 text-center text-3xl text-green-600">
      Geeksforgeeks Image Gallery
      </h1>
    <h3 class="mb-10 text-center text-xl text-green-600">
      Click the image to view
      </h3>
 
    <!-- Image grid -->
    <div class="p-10 grid grid-cols-3 gap-5 ">
        <img class="w-full h-full object-cover cursor-pointer" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240215121528/javare15.png"
             alt="Img 1" id="img1" />
 
        <img class="w-full h-full object-cover cursor-pointer" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240215121204/15re.webp"
             alt="Img 2" id="img2" />
 
        <img class="w-full h-full object-cover cursor-pointer" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240215121356/jsre15.jpg"
             alt="Img 3" id="img3" />
    </div>
 
    <!-- The Modal -->
    <div id="modal"
         class="hidden fixed top-0 left-0 z-80 
                w-screen h-screen bg-black/70 flex 
                justify-center items-center">
 
        <!-- The close button -->
        <a class="fixed z-90 top-6 right-8 
                  text-white text-5xl font-bold" 
           href="javascript:void(0)"
           onclick="closeModal()">
              ×
          </a>
 
        <!-- A big image will be displayed here -->
        <img id="modal-img"
             class="max-w-[800px] max-h-[600px] object-cover"/>
    </div>
 
    <script>
         
          // Get all the img elements in the grid
        var images = document.querySelectorAll('.grid img');
 
        // Loop through each img element
        images.forEach(function (img) {
             
          // Add a click event listener to each img element
            img.addEventListener('click', function () {
                showModal(img.src);
            });
        });
 
        // Get the modal by id
        var modal = document.getElementById("modal");
 
        // Get the modal image tag
        var modalImg = document.getElementById("modal-img");
 
        // This function is called when a small image is clicked
        function showModal(src) {
            modal.classList.remove('hidden');
            modalImg.src = src;
        }
 
        // This function is called when the close button is clicked
        function closeModal() {
            modal.classList.add('hidden');
        }
    </script>
</body>
 
</html>