If you enjoy our website, feel free to connect with us on Google News or become a part of our Telegram Group for more updates and engaging discussions.

Lightbox Image with Vanilla Javascript

Elevate your web design with a Vanilla JavaScript lightbox image gallery. Learn how in our step-by-step tutorial!
Lightbox Image with Vanilla Javascript

In the contemporary landscape of web development, prioritizing the creation of sleek and user-friendly interfaces has become paramount. An effective means to elevate the user experience on your website is by incorporating a lightbox image feature. This feature facilitates the display of images in a distraction-free overlay, making it particularly appealing for presenting galleries or large images. In this tutorial, we will lead you through the steps of crafting a personalized lightbox image using vanilla JavaScript. This approach ensures seamless integration into your webpage, providing an elegant solution for showcasing your visual content.

Styling

Add the following CSS:

/*! Image Lightbox CSS
 * Copyright: It Is Unique Official : It Is Unique Blog - Official
 * License: MIT
 */
.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}

To maintain a harmonious design integration with your website, it's crucial to incorporate custom CSS styles for your lightbox. Tailor the styling of the lightbox container, close button, and any other elements as per your design requirements. This approach ensures a cohesive and visually pleasing experience for your users.

JavaScript Magic

Now, let's delve into the JavaScript code to seamlessly enable the functionality of your lightbox. Incorporate the subsequent JavaScript code into your existing script or establish a new JavaScript file for implementation:

/*! Image Lightbox Script
 * Copyright: It Is Unique Official : It Is Unique Blog - Official
 * License: MIT
 */
(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 piece of code is designed to monitor clicks on your gallery images, triggering the display of the selected image within the lightbox. Additionally, users are granted the ability to close the lightbox by clicking the designated close button.

Conclusion

Crafting a personalized lightbox image using vanilla JavaScript empowers you with complete control over both its functionality and visual appeal. This enables a seamless integration into your website's design, delivering a delightful image viewing experience for your users. Don't forget to customize the styles and functionality to align with your project's distinct needs, and relish the process of enhancing your website's user experience with this versatile feature. Happy coding!

Success isn't an endpoint, nor is failure a definitive outcome. It's the bravery to persist that truly matters in the journey of life.

You may like these posts

Post a Comment

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


Cookie Consent

We use cookies on our website to analyze traffic, enhance your browsing experience, and remember your preferences. By continuing to use our site, you consent to our use of cookies. You can manage your cookie preferences in your browser settings. For more information, please read our Privacy Policy.

Google Translate
Bookmark Post