https://hammarbyungdom.se/js/lightbox.js

1window.saLightbox = (function () {
2    var overlay, img, prevBtn, nextBtn, closeBtn, counter;
3    var urls = [];
4    var current = 0;
5
6    function init() {
7        if (overlay) return;
8
9        overlay = document.createElement('div');
10        overlay.className = 'sa-lightbox';
11        overlay.innerHTML =
12            '<div class="sa-lightbox__backdrop"></div>' +
13            '<button class="sa-lightbox__close">&times;</button>' +
14            '<button class="sa-lightbox__nav sa-lightbox__nav--prev">&lsaquo;</button>' +
15            '<button class="sa-lightbox__nav sa-lightbox__nav--next">&rsaquo;</button>' +
16            '<img class="sa-lightbox__image" />' +
17            '<div class="sa-lightbox__counter"></div>';
18
19        document.body.appendChild(overlay);
20
21        img = overlay.querySelector('.sa-lightbox__image');
22        prevBtn = overlay.querySelector('.sa-lightbox__nav--prev');
23        nextBtn = overlay.querySelector('.sa-lightbox__nav--next');
24        closeBtn = overlay.querySelector('.sa-lightbox__close');
25        counter = overlay.querySelector('.sa-lightbox__counter');
26
27        overlay.querySelector('.sa-lightbox__backdrop').addEventListener('click', close);
28        closeBtn.addEventListener('click', close);
29        prevBtn.addEventListener('click', function () { go(current - 1); });
30        nextBtn.addEventListener('click', function () { go(current + 1); });
31
32        document.addEventListener('keydown', function (e) {
33            if (!overlay.classList.contains('sa-lightbox--open')) return;
34            if (e.key === 'Escape') close();
35            if (e.key === 'ArrowLeft') go(current - 1);
36            if (e.key === 'ArrowRight') go(current + 1);
37        });
38    }
39
40    function go(index) {
41        if (index < 0) index = urls.length - 1;
42        if (index >= urls.length) index = 0;
43        current = index;
44        img.src = urls[current];
45        counter.textContent = urls.length > 1 ? (current + 1) + ' / ' + urls.length : '';
46        prevBtn.style.display = urls.length > 1 ? '' : 'none';
47        nextBtn.style.display = urls.length > 1 ? '' : 'none';
48    }
49
50    function show() {
51        init();
52        overlay.classList.add('sa-lightbox--open');
53        document.body.style.overflow = 'hidden';
54    }
55
56    function close() {
57        overlay.classList.remove('sa-lightbox--open');
58        document.body.style.overflow = '';
59        img.src = '';
60    }
61
62    return {
63        open: function (gallery, clicked) {
64            var links = gallery.querySelectorAll('a[href]');
65            urls = [];
66            var startIndex = 0;
67            for (var i = 0; i < links.length; i++) {
68                urls.push(links[i].href);
69                if (links[i] === clicked) startIndex = i;
70            }
71            current = startIndex;
72            show();
73            go(current);
74        },
75        openSingle: function (url) {
76            urls = [url];
77            current = 0;
78            show();
79            go(0);
80        }
81    };
82})();
83
84window.saGalleryToggle = function (containerId, link) {
85    var container = document.getElementById(containerId);
86    if (!container) return;
87    var extras = container.querySelectorAll('.sa-paragraph__gallery-link--extra');
88    if (!extras.length) return;
89    var hidden = extras[0].classList.contains('sa-paragraph__gallery-link--hidden')
90        || getComputedStyle(extras[0]).display === 'none';
91    for (var i = 0; i < extras.length; i++) {
92        extras[i].classList.toggle('sa-paragraph__gallery-link--revealed', hidden);
93    }
94    link.textContent = hidden ? 'Visa färre bilder >>' : 'Visa fler bilder >>';
95};
96
97window.saAlbumLoad = function (containerId, link) {
98    var container = document.getElementById(containerId);
99    if (!container) return;
100    container.classList.remove('sa-paragraph__gallery--lazy');
101    if (link && link.parentNode) link.parentNode.style.display = 'none';
102};