Create a Tabbed Image Gallery with CSS and JavaScript

Image gallery on a web page can be displayed in various forms. One of them is a tabbed image gallery. On clicking the image thumbnail from the image gallery, the image expands. Let us see how to create a tabbed image gallery with HTML and CSS.

Set the images for the thumbnail

For our example, we have considered 3 images and added to the web page using the <img> element −

<img class="ImgThumbnail" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg"/>
<img class="ImgThumbnail" src="https://www.tutorialspoint.com/sql/images/sql-mini-logo.jpg" />
<img class="ImgThumbnail" src="https://www.tutorialspoint.com/sqlite/images/sqlite-mini-logo.jpg"/>

Image Thumbnail

When the mouse cursor is placed on the image, the image thumbnail will appear as clickable because we have set the cursor property to pointer. The transition is set using the transition property. Here are the other styles for the image thumbnail −

.ImgThumbnail {
   border-radius: 5px;
   cursor: pointer;
   transition: 0.3s;
   height: 250px;
   width: 250px;
}

Create a modal

On clicking any of the image thumbnails, the image will open −

<div class="modal">
   <span class="close">&times;</span>
   <img class="modalImage" id="img01" />
</div>

The close button for the modal

When the image thumbnail is clicking, the modal opens. On that full-size image, a close button is also visible to close the image −

<span class="close">&times;</span>

The script for the modal to work

On clicking the image thumbnail, the event listener will allow displaying the image. On clicking the close button, the same modal image will close because the display property it set to none −

<script>
   var modalEle = document.querySelector(".modal");
   var modalImage = document.querySelector(".modalImage");
   Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
      item.addEventListener("click", event => {
         modalEle.style.display = "block";
         modalImage.src = event.target.src;
      });
   });
   document.querySelector(".close").addEventListener("click", () => {
      modalEle.style.display = "none";
   });
</script>

Example

The following is the code to produce a tabbed image gallery with CSS and JavaScript −

<!DOCTYPE html>
<html>
<head>
   <style>
      * {
         box-sizing: border-box;
      }
      h1 {
         text-align: center;
      }
      .ImgThumbnail {
         border-radius: 5px;
         cursor: pointer;
         transition: 0.3s;
         height: 250px;
         width: 250px;
      }
      .ImgThumbnail:nth-of-type(1) {
         margin-left: 20%;
      }
      .modal {
         display: none;
         position: relative;
         z-index: 1;
         padding-top: 100px;
         left: 0;
         top: 0;
         width: 100%;
         height: 60%;
         overflow: auto;
      }
      .modalImage {
         margin: auto;
         display: block;
         width: 50%;
         height: 60%;
         max-width: 700px;
      }
      #caption {
         margin: auto;
         display: block;
         width: 80%;
         max-width: 700px;
         text-align: center;
         color: #ccc;
         padding: 10px 0;
         height: 150px;
      }
      .close {
         font-weight: bolder;
         position: absolute;
         right: 25%;
         color: #ffffff;
         font-size: 40px;
         transition: 0.3s;
      }
      .close:hover,
      .close:focus {
         color: rgb(255, 0, 0);
         cursor: pointer;
      }
      @media only screen and (max-width: 700px) {
         .modalImage {
            width: 100%;
         }
      }
   </style>
</head>
<body>
   <h1>Image Modal Gallery Example</h1>
   <img class="ImgThumbnail" src="https://images.pexels.com/photos/3635300/pexels-photo-3635300.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
   <img class="ImgThumbnail" src="https://picsum.photos/id/237/536/354.jpg" />
   <img class="ImgThumbnail" src="https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
   <!-- The Modal -->
   <div class="modal">
      <span class="close">&times;</span>
      <img class="modalImage" id="img01" />
   </div>
   <script>
      var modalEle = document.querySelector(".modal");
      var modalImage = document.querySelector(".modalImage");
      Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
         item.addEventListener("click", event => {
            modalEle.style.display = "block";
            modalImage.src = event.target.src;
         });
      });
      document.querySelector(".close").addEventListener("click", () => {
         modalEle.style.display = "none";
      });
   </script>
</body>
</html>
Updated on: 2023-12-14T12:23:38+05:30

712 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements