https://pzs.si/assets/js/gallery.js?ver=1790914297

1jQuery(document).ready(function($) {
2    $('.photo-gallery').each(function() {
3        const gallery = $(this);
4        const photos = JSON.parse(gallery.attr('data-photos'));
5        let currentIndex = 0;
6
7        function setMainImage(index) {
8            currentIndex = index;
9            const photoData = photos[index];
10            const newSrc = photoData.src;
11            const author = photoData.avtor || "";
12            const title = photoData.napis || "";
13            const povzetek = photoData.povzetek || "";
14
15            gallery.find('#main-gallery-image').fadeOut(200, function () {
16                $(this).attr('src', newSrc).fadeIn(200);
17            });
18
19            gallery.find('.image-author').fadeOut(200, function () {
20                $(this).find('.text').text(author);
21                if(author !== '') {
22                    $(this).fadeIn(200);
23                }
24            });
25
26            gallery.find('.image-title').fadeOut(200, function () {
27                $(this).find('.text').text(title);
28                if(title !== '') {
29                    $(this).fadeIn(200);
30                }
31            });
32
33            gallery.find('.image-summary').fadeOut(200, function () {
34                $(this).text(povzetek).fadeIn(200);
35            });
36        }
37
38        // Thumbnail click
39        gallery.find('.gallery-thumb').on('click', function() {
40            const index = $(this).data('index');
41            if (index !== undefined) setMainImage(index);
42        });
43
44        // Main image navigation arrows
45        gallery.find('.gallery-main-nav.left').on('click', function() {
46            currentIndex = (currentIndex - 1 + photos.length) % photos.length;
47            setMainImage(currentIndex);
48        });
49        gallery.find('.gallery-main-nav.right').on('click', function() {
50            currentIndex = (currentIndex + 1) % photos.length;
51            setMainImage(currentIndex);
52        });
53
54        // Swipe navigation for main image
55        let startX = 0;
56        let endX = 0;
57        const swipeThreshold = 50;
58
59        gallery.find('.gallery-main-image').on('touchstart mousedown', function(e) {
60            startX = e.type === "touchstart" ? e.originalEvent.touches[0].clientX : e.clientX;
61        });
62
63        gallery.find('.gallery-main-image').on('touchend mouseup', function(e) {
64            endX = e.type === "touchend" ? e.originalEvent.changedTouches[0].clientX : e.clientX;
65            const diff = startX - endX;
66
67            if (Math.abs(diff) > swipeThreshold) {
68                if (diff > 0) { // swipe left → next image
69                    currentIndex = (currentIndex + 1) % photos.length;
70                } else { // swipe right → previous image
71                    currentIndex = (currentIndex - 1 + photos.length) % photos.length;
72                }
73                setMainImage(currentIndex);
74            }
75        });
76
77        // Thumbnail carousel navigation
78        function getThumbWidth() {
79            const thumb = gallery.find('.gallery-thumb').first();
80            return thumb.outerWidth(true);
81        }
82
83        gallery.find('.thumb-nav.left').on('click', function() {
84            gallery.find('.thumbs-wrapper').animate({scrollLeft: '-=' + getThumbWidth()}, 300);
85        });
86        gallery.find('.thumb-nav.right').on('click', function() {
87            gallery.find('.thumbs-wrapper').animate({scrollLeft: '+=' + getThumbWidth()}, 300);
88        });
89
90        // Thumbnail grab-to-scroll
91        const thumbsWrapper = gallery.find('.thumbs-wrapper');
92        let isDown = false;
93        let startThumbX;
94        let scrollLeft;
95
96        thumbsWrapper.on('mousedown touchstart', function(e) {
97            isDown = true;
98            thumbsWrapper.addClass('dragging no-select');
99            startThumbX = e.type === "touchstart" ? e.originalEvent.touches[0].pageX : e.pageX;
100            scrollLeft = thumbsWrapper.scrollLeft();
101        });
102
103        thumbsWrapper.on('mouseleave mouseup touchend', function() {
104            isDown = false;
105            thumbsWrapper.removeClass('dragging no-select');
106        });
107
108        thumbsWrapper.on('mousemove touchmove', function(e) {
109            if(!isDown) return;
110            e.preventDefault();
111            const x = e.type === "touchmove" ? e.originalEvent.touches[0].pageX : e.pageX;
112            const walk = (x - startThumbX) * 2; // speed factor
113            thumbsWrapper.scrollLeft(scrollLeft - walk);
114        });
115    });

116});