https://pzs.si/assets/js/lightbox.js?ver=1790274308

1jQuery(document).ready(function($) {
2    const lightbox = $('#gallery-lightbox');
3    if (!lightbox.length) return;
4
5    const lightboxImg = $('#lightbox-image');
6    const lightboxAuthor = $('#lightbox-author');
7    const lightboxTitle = $('#lightbox-title');
8    const lightboxSummary = $('#lightbox-summary');
9    const lightboxClose = $('#lightbox-close');
10    const prevBtn = $('#lightbox-prev');
11    const nextBtn = $('#lightbox-next');
12
13    let currentIndex = 0;
14    let currentPhotos = [];
15
16
17
18    function showPhoto(index) {
19        console.log(currentPhotos);
20        currentIndex = (index + currentPhotos.length) % currentPhotos.length;
21        const photoData = currentPhotos[currentIndex];
22        lightboxImg.attr('src', photoData.src);
23        lightboxAuthor.html(photoData.avtor ? `<i class="fa-solid fa-camera alt"></i> ${photoData.avtor}` : "");
24        lightboxTitle.html(photoData.napis ? `<span>${photoData.napis}</span>` : "");
25        lightboxSummary.text(photoData.povzetek || "");
26    } 
27
28    // Open lightbox on main image click
29    $(document).on('click', '#main-gallery-image', function() {
30        const gallery = $(this).closest('.photo-gallery');
31        currentPhotos = JSON.parse(gallery.attr('data-photos'));
32
33        const currentSrc = $(this).attr('src');
34        currentIndex = currentPhotos.findIndex(p => p.src === currentSrc);
35        if (currentIndex === -1) currentIndex = 0;
36
37        showPhoto(currentIndex);
38        lightbox.removeClass('hidden').fadeIn(200);
39        $('body').css('overflow', 'hidden');
40    });
41
42    // Close lightbox
43    function closeLightbox() {
44        lightbox.fadeOut(200, function() {
45            lightbox.addClass('hidden');
46            $('body').css('overflow', 'auto');
47        });
48    }
49    lightboxClose.on('click', closeLightbox);
50    lightbox.on('click', function(e) {
51        if ($(e.target).is(lightbox)) closeLightbox();
52    });
53    $(document).on('keydown', function(e) {
54        if (e.key === "Escape" && lightbox.is(':visible')) closeLightbox();
55    });
56
57    // Desktop nav buttons
58    prevBtn.on('click', function() { showPhoto(currentIndex - 1); });
59    nextBtn.on('click', function() { showPhoto(currentIndex + 1); });
60
61    // Mobile swipe/drag navigation
62    let startX = 0;
63    let isDragging = false;
64
65    lightboxImg.on('touchstart mousedown', function(e) {
66        startX = e.type === "touchstart" ? e.originalEvent.touches[0].clientX : e.clientX;
67        isDragging = true;
68    });
69
70    lightboxImg.on('touchend mouseup', function(e) {
71        if (!isDragging) return;
72        const endX = e.type === "touchend" ? e.originalEvent.changedTouches[0].clientX : e.clientX;
73        const diff = startX - endX;
74
75        if (Math.abs(diff) > 50) {
76            if (diff > 0) {
77                showPhoto(currentIndex + 1); // swipe left → next
78            } else {
79                showPhoto(currentIndex - 1); // swipe right → prev
80            }
81        }
82        isDragging = false;
83    });
84});