Lightbox in Taptop

Published on
July 16, 2025
Topic
Development

Taptop's new custom attributes feature lets you easily add Fancybox lightbox galleries without touching HTML. Here's how:

How to Connect Fancybox in Taptop

Let’s walk through an example where clicking on an image opens a lightbox gallery using Fancybox — and all of it works within Taptop.

1. Add Fancybox Assets

In your project settings or inside the <head> tag, include these CDN links:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>


2. Mark Images withdata-fancybox

Inside Taptop, select the wrapper around an image (like a <div> or a link), and assign it the custom attribute:

data-fancybox="gallery"

This groups images into the same gallery set.

3. Add JavaScript for Setup

At the bottom of your page (or in a custom code block), insert this script:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('[data-fancybox="gallery"]').forEach(function (item) {
      const img = item.querySelector("img");
      if (img && !item.hasAttribute("data-src")) {
        item.setAttribute("data-src", img.getAttribute("src"));
        item.style.cursor = "zoom-in";
      }
    });

    Fancybox.bind("[data-fancybox]", {
      animationEffect: "fade",
      transitionEffect: "fade",
      transitionDuration: 500,
      closeEffect: "fade",
    });
  });
</script>


That’s it! Now clicking an image will open it in a clean, animated modal.

Why This Is Awesome

  • No need to hand-code HTML or JS manually
  • Works entirely within Taptop’s visual interface
  • Automatically turns static images into an interactive gallery
  • Uses clean, modern transitions (like fade or zoom)
  • Easy to group images with data-fancybox="some-gallery-name"

Pro Tips

  • Add data-fancybox="gallery" to all related images to create a group.
  • You can change the animation style by editing the animationEffect or transitionEffect.
  • Make sure your image is inside a wrapper element (like <a> or <div>) so the script can attach the data-src properly.

Final Thoughts

The addition of custom attribute support in Taptop is a huge step forward. It allows designers and developers to blend visual editing with flexible, powerful scripting — without sacrificing clean code.
This Fancybox example shows how easily you can enhance a website by combining visual tools with modern JavaScript libraries.
Now, when your client asks for a responsive, animated image gallery — you know exactly how to deliver it. No fuss, just data-fancybox and a sprinkle of JS.

Written by
Alex Gudaev —
Jul 2025

Other notes