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