How to create a image gallery with Tailwind CSS and JavaScript

Today we are building a simple image gallery using Tailwind CSS and JavaScript. Just like the one we built in the previous tutorial, with Alpine JS, but this time we will use vainilla JS.

What are image galleries?

Image galleries serve as a method to present a collection of images in an attractive manner. They are employed to display various images or to offer a preview of a product or service.

Use Cases:

• Product images: For instance, a product gallery can display multiple images or features of a product.
• Service images: A service gallery can highlight different images or features of a service.
• Event images: An event gallery can present various images or features of an event.
• Blog images: A blog gallery can feature multiple images or highlights from blog posts.

These are just a few examples. There are numerous applications for image galleries, with endless possibilities.

Let’s write the html

Understanding the code

• ìd="image-gallery": This is the id of the container element that will hold the image gallery.
• data-image-url="...": This is a data attribute that will be used to store the URL of the image that will be displayed in the gallery.
• id="modal": This is the id of the modal element that will be used to display the image when clicked.
• id="modal-content": This is the id of the modal content element that will be used to display the image.
• id="modal-close-button": This is the id of the modal close button element that will be used to close the modal.
• id="modal-image": This is the id of the modal image element that will be used to display the image.

<div id="image-gallery">
  <div>
    <div data-image-url="...">
      <img src="..." />
    </div>
    <!-- Add more image placeholders as needed -->
  </div>
  <!-- Modal -->
  <div id="modal">
    <div id="modal-content">
      <button id="modal-close-button">Close</button>
      <img id="modal-image" />
    </div>
  </div>
</div>

Let’s write the JavaScript

• document.addEventListener("DOMContentLoaded", function () {: This is the event listener that will be triggered when the DOM is fully loaded.
• const gallery = document.getElementById("image-gallery");: This is the code that will select the image-gallery element and store it in a variable called gallery.
• const modal = document.getElementById("modal");: This is the code that will select the modal element and store it in a variable called modal.
• const modalImage = document.getElementById("modal-image");: This is the code that will select the modal-image element and store it in a variable called modalImage.
• const closeModalButton = document.getElementById("modal-close-button");: This is the code that will select the modal-close-button element and store it in a variable called closeModalButton.

The gallery

• gallery.addEventListener("click", function (event) {: This is the event listener that will be triggered when the image-gallery element is clicked.
• if (event.target.tagName === "IMG") {: This is the code that will check if the clicked element is an img element.
• const imageUrl = event.target.parentElement.getAttribute("data-image-url");: This is the code that will get the data-image-url attribute of the clicked element’s parent element and store it in a variable called imageUrl.
• modalImage.src = imageUrl;: This is the code that will set the src attribute of the modal-image element to the imageUrl variable.
• modal.classList.remove("hidden");: This is the code that will remove the hidden class from the modal element.
• modal.classList.add("flex", "flex-col");: This is the code that will add the flex and flex-col classes to the modal element.

The modal

• function closeModal() {: This is the function that will be called when the modal-close-button is clicked.
• modal.classList.add("hidden");: This is the code that will add the hidden class to the modal element.
• modal.classList.remove("flex", "flex-col");: This is the code that will remove the flex and flex-col classes from the modal element.

Closing the modal

• closeModalButton.addEventListener("click", closeModal);: This is the event listener that will be triggered when the modal-close-button is clicked.
• document.addEventListener("keydown", function (event) {: This is the event listener that will be triggered when a key is pressed.
• if (event.key === "Escape") {: This is the code that will check if the pressed key is Escape.
• closeModal();: This is the code that will call the closeModal function.

document.addEventListener("DOMContentLoaded", function () {
  const gallery = document.getElementById("image-gallery");
  const modal = document.getElementById("modal");
  const modalImage = document.getElementById("modal-image");
  const closeModalButton = document.getElementById("modal-close-button");

  gallery.addEventListener("click", function (event) {
    if (event.target.tagName === "IMG") {
      const imageUrl =
        event.target.parentElement.getAttribute("data-image-url");
      modalImage.src = imageUrl;
      modal.classList.remove("hidden");
      modal.classList.add("flex", "flex-col");
    }
  });

  function closeModal() {
    modal.classList.add("hidden");
    modal.classList.remove("flex", "flex-col");
  }

  modal.addEventListener("click", function (event) {
    if (
      event.target.id === "modal" ||
      event.target.id === "modal-close-button"
    ) {
      closeModal();
    }
  });

  closeModalButton.addEventListener("click", closeModal);

  document.addEventListener("keydown", function (event) {
    if (event.key === "Escape") {
      closeModal();
    }
  });
});

Conclusion

In this tutorial, we learned how to create a simple image gallery using Tailwind CSS and JavaScript. We covered the basics of HTML and the JavaScript code that will be used to create the gallery. You can style it with CSS or however you like it, we chose Tailwind CSS for this tutorial.

Hope you found this tutorial helpful and have a nice day!