foto-portfolio/assets/site.js

/* Public site behavior: hiding navigation + gallery lightbox. Vanilla JS. */
(function () {
    'use strict';

    /* ---- Navigation: hide on scroll-down, show on scroll-up ------------- */
    var nav = document.getElementById('nav');
    if (nav) {
        var lastY = window.scrollY;
        var onScroll = function () {
            var y = window.scrollY;
            if (y > lastY && y > 80) {
                nav.classList.add('nav-hidden');
            } else if (y < lastY - 2 || y <= 80) {
                nav.classList.remove('nav-hidden');
            }
            lastY = y;
        };
        window.addEventListener('scroll', onScroll, { passive: true });
    }

    /* ---- Lightbox for gallery pages -------------------------------------
       Markup contract: .grid contains <a href="<full-res URL>"><img></a>. */
    var grid = document.querySelector('.grid');
    if (!grid) return;

    var links = Array.prototype.slice.call(grid.querySelectorAll('a'));
    if (!links.length) return;

    var box = document.createElement('div');
    box.className = 'lightbox';
    box.innerHTML =
        '<button class="lb-close" aria-label="Close">&times;</button>' +
        '<button class="lb-prev" aria-label="Previous">&#8249;</button>' +
        '<img alt="">' +
        '<button class="lb-next" aria-label="Next">&#8250;</button>' +
        '<span class="lb-count"></span>';
    document.body.appendChild(box);

    var img = box.querySelector('img');
    var count = box.querySelector('.lb-count');
    var current = -1;

    function show(i) {
        current = (i + links.length) % links.length;
        img.src = links[current].href;
        count.textContent = (current + 1) + ' / ' + links.length;
        box.classList.add('open');
        document.body.style.overflow = 'hidden';
    }

    function close() {
        box.classList.remove('open');
        img.src = '';
        document.body.style.overflow = '';
        current = -1;
    }

    links.forEach(function (a, i) {
        a.addEventListener('click', function (e) {
            e.preventDefault();
            show(i);
        });
    });

    box.querySelector('.lb-close').addEventListener('click', close);
    box.querySelector('.lb-prev').addEventListener('click', function () { show(current - 1); });
    box.querySelector('.lb-next').addEventListener('click', function () { show(current + 1); });
    box.addEventListener('click', function (e) { if (e.target === box) close(); });

    document.addEventListener('keydown', function (e) {
        if (current < 0) return;
        if (e.key === 'Escape') close();
        if (e.key === 'ArrowLeft') show(current - 1);
        if (e.key === 'ArrowRight') show(current + 1);
    });

    /* Basic swipe support */
    var touchX = null;
    box.addEventListener('touchstart', function (e) { touchX = e.touches[0].clientX; }, { passive: true });
    box.addEventListener('touchend', function (e) {
        if (touchX === null || current < 0) return;
        var dx = e.changedTouches[0].clientX - touchX;
        if (dx > 50) show(current - 1);
        else if (dx < -50) show(current + 1);
        touchX = null;
    }, { passive: true });
})();