Fancybox

Ready-made chunks for Fancybox (loaded from a CDN). Live examples are on the demo site demog3x.ivan345.com.

Thumbnail grid

medium thumbnails; a click opens the original in a viewer with browsing.

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

[[!Gallery3x?
    &tplOuter=`tpl.Gallery3x.Fancybox.GridOuter`
    &tplThumb=`tpl.Gallery3x.Fancybox.GridItem`
]]

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.umd.js"></script>
<script>
    Fancybox.bind('[data-fancybox="gallery"]', {});
</script>

The Fenom version (requires pdoTools) iterates over all images in one chunk:

[[!Gallery3x?
    &fenom=`1`
    &tplOuter=`tpl.Gallery3x.Fancybox.GridOuter.fenom`
]]

<script>
    Fancybox.bind('[data-fancybox="gallery-[[*id]]"]', {});
</script>

Large image and thumbnail strip

The first image at the top in the medium size, a strip of small thumbnails below. Clicking a thumbnail changes the large image; clicking the large one opens the viewer.

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

[[!Gallery3x?
    &tplOuter=`tpl.Gallery3x.Fancybox.outer`
    &tplThumb=`tpl.Gallery3x.Fancybox.thumbItem`
]]

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.umd.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var main = document.getElementById('fancybox-main-[[*id]]');
    var thumbs = document.getElementById('fancybox-thumbs-[[*id]]');
    if (!main || !thumbs) return;
    var links = thumbs.querySelectorAll('.thumb-item');

    Fancybox.bind('[data-fancybox="gallery-[[*id]]"]', {});

    thumbs.addEventListener('click', function (e) {
        var item = e.target.closest('.thumb-item');
        if (!item) return;
        e.preventDefault();
        main.querySelector('img').src = item.dataset.mediumUrl;
        main.querySelector('a').href = item.href;
        main.querySelector('a').setAttribute('data-caption', item.getAttribute('data-caption'));
        links.forEach(function (l) { l.classList.remove('is-active'); });
        item.classList.add('is-active');
    });
    if (links.length) links[0].classList.add('is-active');
});
</script>

Styles for this view (optional):

<style>
.fancybox-carousel-container { max-width: 800px; margin: 40px auto; }
.fancybox-carousel-main { margin-bottom: 15px; border-radius: 6px; overflow: hidden; }
.fancybox-carousel-main img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.fancybox-carousel-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.fancybox-carousel-thumbs .thumb-item { flex: none; border: 2px solid transparent; border-radius: 4px; overflow: hidden; }
.fancybox-carousel-thumbs .thumb-item.is-active { border-color: #007bff; }
.fancybox-carousel-thumbs .thumb-item img { width: 100px; height: 75px; object-fit: cover; display: block; }
</style>

The same view as one Fenom chunk: &fenom=`1` &tplOuter=`tpl.Gallery3x.Fancybox.Carousel.fenom` (same script).