Lightbox Image with Vanilla Javascript

Hello! Welcome to EmadulAi.

In today’s web development world, creating elegant and user-friendly interfaces is a top priority. One effective way to enhance the user experience on your website is by adding a lightbox image feature. A lightbox displays images in a distraction-free overlay, making it an excellent choice for showcasing galleries or large visuals.

In this tutorial, we’ll walk you through the step-by-step process of building a custom lightbox image using vanilla JavaScript. By the end, you’ll be able to seamlessly integrate it into your own webpage and provide visitors with a clean, modern image viewing experience.

Styling

Now, let’s add the following CSS to style our lightbox:

/*! Image Lightbox CSS By EmadulAi */
.lbImg{position:relative}
.lbImg::before{content:'';position:absolute;top:10px;right:5px;width:30px;height:30px;display:flex;margin:0 5px;background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23363637' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/></svg>") center / 14px no-repeat;background-color:rgba(0,0,0,.2);border-radius:50%;z-index:2;opacity:0;transition:all 0.2s ease;cursor:pointer}
.lbImg:hover::before{opacity:1}
.lbImg img {cursor:zoom-in;}
.zmImg{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;z-index:999;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px);opacity:0;visibility:hidden;transition:all 0.4s ease;}
.zmImg.active{opacity:1;visibility:visible}
.zmImg a, .zmImg a:hover{opacity:1}
.zmImg img{display:block;max-width:92%;max-height:92%;width:auto;margin:auto;border-radius:10px;box-shadow:0 5px 30px 0 rgba(0,0,0,.05);transform:scale(0.4);transition:all 0.4s ease;transition-property:transform;}
.zmImg.active img {transform:scale(1);cursor:zoom-out;}
.zmImg img.full{left:auto;right:auto;border-radius:10px;width:auto}
.zmImg::after{content:'\2715';line-height:16px;font-size:14px;color:#fffdfc;background:#482dff;position:fixed;bottom:-20px;right:-20px; display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%;opacity:0;visibility:hidden;transition:all 0.4s ease;}
.zmImg.active::after{bottom:20px;right:20px;opacity:1;visibility:visible;cursor:pointer}

💡 Tip: To ensure your lightbox matches your website's design, you can customize the CSS styles. You can style the lightbox container, close button, and any other elements as needed to create a cohesive and visually appealing experience.

JavaScript Magic

Now, let's dive into the JavaScript code to make your lightbox work smoothly. Add the following JavaScript code to your existing script or create a new JavaScript file:

/*! Image Lightbox Script By EmadulAi */
(function (options) {
  function getType (e) {
      return Object.prototype.toString.call(e).replace(/(?:^\[object\s(.*?)\]$)/,"$1").toLowerCase();
  }
  const images = Array.prototype.filter.call(
      getType(options.selectors) === "string" ?
          document.querySelectorAll(options.selectors) :
          (getType(options.selectors) === "array" ?
            document.querySelectorAll(options.selectors.join(",")) :
            []),
      function (image) {
          return image.tagName === "IMG" && (getType(options.ignoreClass) === "string" && options.ignoreClass ? !image.classList.contains(options.ignoreClass) : true);
      }
  );
  if (images.length === 0) {
      return;
  }
  const lightBox = document.createElement("div");
  lightBox.className = options.classes.lightboxWrapper;
  lightBox.addEventListener("click", function (event) {
      lightBox.classList.remove("active");
  });
  lightBox.addEventListener("transitionend", function (event) {
      if (event.propertyName === "opacity" && getComputedStyle(lightBox).getPropertyValue("opacity") === "0" && !lightBox.classList.contains("active")) {
          lightBox.parentNode.removeChild(lightBox);
      }
  });
  images.forEach(function (image) {
      const imageContainer = document.createElement("div");
      imageContainer.className = options.classes.imageWrapper;
      image.parentNode.insertBefore(imageContainer, image);
      imageContainer.appendChild(image);
      imageContainer.addEventListener("click", function (event) {
          event.preventDefault();
          lightBox.innerHTML = image.outerHTML;
          document.body.appendChild(lightBox);
          setTimeout(function () {
              lightBox.classList.add("active");
          }, 40);
      });
  });
}).call(this, {
  selectors: "#postBody img",
  ignoreClass: "noLb",
  classes: {
    imageWrapper: "lbImg",
    lightboxWrapper: "zmImg"
  }
});

This JavaScript code listens for clicks on your gallery images and displays the selected image in the lightbox. It also allows users to close the lightbox by clicking the close button, ensuring a smooth and interactive experience.

Conclusion That’s all about adding the Lightbox Image with Vanilla Javascript in your Blogger posts. We hope you found this guide helpful and easy to follow. Please feel free to share this article with others. If you face any issues or have any questions regarding any step, don’t hesitate to ask in the comment section. Thank you for reading!