https://www.wind24.it/js/fs-gal.js

1/**
2 * Author: Tim Vervoort - [email protected]
3 * Licence: Free for commercial use
4 * Last update: 23rd December 2018 - v1.3.1
5 */
6
7var fsGal_preloads = new Array();
8
9$('document').ready(function() {
10
11    $('.fs-gal-view').css('display', 'flex').hide();
12
13    // Make gallery objects clickable, also dynamic added objects
14    $('body').on('click', '.fs-gal', function(e) {
15        fsGal_DisplayImage($(e.currentTarget));
16    });
17  
18    preloadImage($('.fs-gal')[0].dataset.url); // Preload the very first image
19
20    // Display gallery
21    function fsGal_DisplayImage(obj) {
22
23        // Set current image
24        title = obj.attr('title');
25        alt = obj.attr('alt');
26        if (!title) { title = alt; }
27        imgElem = $('.fs-gal-main');
28        imgElem.attr('title', title);
29        imgElem.attr('alt', alt);
30        imgElem.attr('src', obj.attr('data-url'));
31        $('.fs-gal-view > h1').text(title);
32        if (!title || title == '') { $('.fs-gal-view > h1').fadeOut(); }
33        else { $('.fs-gal-view > h1').fadeIn(); }
34
35        // Create buttons
36        var current = $('.fs-gal').index(obj);
37        var prev = current - 1;
38        var next = current + 1;
39        if (prev >= 0) {
40            $('.fs-gal-view > .fs-gal-prev').attr('data-img-index', prev);
41        }
42        if (next < $('.fs-gal').length) {
43            $('.fs-gal-view > .fs-gal-next').attr('data-img-index', next);
44        }
45        $('.fs-gal-view').fadeIn(); // Display gallery
46
47        // Wrap gallery
48        if (current == $('.fs-gal').length - 1)  { // Last image
49            $('.fs-gal-view > .fs-gal-next').attr('data-img-index', 0);
50        }
51        else if (current == 0)  { // Last image
52            $('.fs-gal-view > .fs-gal-prev').attr('data-img-index', $('.fs-gal').length - 1);
53        }
54      
55        preloadNextAndPrev(); // Preload next images
56
57    }
58
59    // Preload next and previous image
60    function preloadNextAndPrev() {
61        fsGal_preloads = new Array();
62        // Previous
63        index = $('.fs-gal-view > .fs-gal-prev').attr('data-img-index');
64        elem = $($('.fs-gal').get(index));
65        img = elem.attr('data-url');
66        preloadImage(img);
67        // Next
68        index = $('.fs-gal-view > .fs-gal-next').attr('data-img-index');
69        elem = $($('.fs-gal').get(index));
70        img = elem.attr('data-url');
71        preloadImage(img);
72    }
73
74    // Preload an image
75    function preloadImage(source) {
76      var preload = (new Image());
77      preload.src = source
78      fsGal_preloads.push(preload);
79    }
80
81    // Check if the image viewer is displayed
82    function isViewerOpen() {
83        return $('.fs-gal-view').css('display') !== 'none'; // Can be block, flex...
84    }
85
86    // Gallery navigation
87    $('.fs-gal-view .fs-gal-nav').click(function(e) {
88        e.stopPropagation();
89        if (isViewerOpen()) {
90            var index = $(this).attr('data-img-index');
91            var img = $($('.fs-gal').get(index));
92            fsGal_DisplayImage(img);
93        }        
94    });
95
96    // Close gallery
97    $('.fs-gal-view').click(function(e) {
98        $('.fs-gal-view').fadeOut();
99    });
100    $('.fs-gal-main').click(function(e) {
101        e.stopPropagation();
102    });
103
104    // Keyboard navigation
105    $('body').keydown(function(e) {
106        if (e.keyCode == 37) { 
107            $('.fs-gal-view .fs-gal-prev').click(); // Left arrow
108        }
109        else if(e.keyCode == 39) {
110            $('.fs-gal-view .fs-gal-next').click(); // Right arrow
111        }
112        else if(e.keyCode == 27) {
113            $('.fs-gal-view .fs-gal-close').click(); // ESC
114        }
115    });
116
117    // Scroll navigation
118    $(window).bind('mousewheel', function(e) {
119        if (e.originalEvent.wheelDelta >= 0) { // Scroll up, go to previous image
120            $('.fs-gal-view .fs-gal-prev').click();
121        }
122        else { // Scroll down, go to next image
123            $('.fs-gal-view .fs-gal-next').click();
124        }
125    });
126
127    // Slide navigation using touch swiping
128    var touchstartX = 0;
129    var touchendX = 0;
130    var gestureZone = $('.fs-gal-view')[0];
131
132    // Listen to touch start
133    gestureZone.addEventListener('touchstart', function(event) {
134        touchstartX = event.changedTouches[0].screenX;
135    }, false);
136
137    // Listen to touch end
138    gestureZone.addEventListener('touchend', function(event) {
139        touchendX = event.changedTouches[0].screenX;
140        handleGesture();
141    }, false); 
142
143    // Deterimine touch gesture direction
144    function handleGesture() {
145        if (touchendX <= touchstartX) { // Slide to left, go to next image
146            $('.fs-gal-view .fs-gal-next').click();
147        }
148        if (touchendX >= touchstartX) { // Slide to right, go to previous image
149            $('.fs-gal-view .fs-gal-prev').click();
150        }
151    }
152
153});