fancybox — lightbox link wrapper
Thin wrapper around @fancyapps/ui (v5+). Renders a thumbnail link with hover overlay + magnifier icon; clicking opens the full image in a lightbox. Auto-binds via data-fancybox attribute, no manual init.
Install
npm install @fancyapps/ui
npx czg-ui add fancybox// resources/sass/app.scss
@import '@fancyapps/ui/dist/fancybox/fancybox.css';
@import 'components/fancybox';// resources/js/app.js
import './components/fancybox';Requires base. Pulls @fancyapps/ui as npm dependency.
Parameters
| Param | Type | Default | Notes | |
|---|---|---|---|---|
src | string | — | URL of the full-size image (required) | |
thumb | string\ | null | =src | Thumbnail URL (defaults to full image) |
alt | string | '' | Image alt text | |
group | string\ | null | 'fancybox' | Gallery id — items sharing it are navigable in the lightbox |
caption | string\ | null | — | Caption shown in the lightbox |
class | string\ | null | — | Extra class on the <a> |
showOverlay | bool | true | Hover overlay with magnifier icon |
Usage — single image
{include /app/components/Gallery/fancybox.latte,
src => '/img/photo-large.jpg',
thumb => '/img/photo-thumb.jpg',
alt => 'Realizace 2025'}Usage — gallery
All items sharing group become a single carousel inside the lightbox (arrow keys, swipe on mobile):
{foreach $photos as $p}
{include /app/components/Gallery/fancybox.latte,
src => $p->fullUrl,
thumb => $p->thumbUrl,
group => 'gallery-realizace',
caption => $p->title}
{/foreach}When NOT to use
- Hero images / decorative photos that the user is not expected to
zoom into — adds JS weight for nothing
- PDFs, videos, iframes — Fancybox supports them, but consider a
dedicated viewer (PDF.js, plyr) with better UX
- Touch-only mobile with a single image — native pinch-zoom may be
enough