https://www.woelsau-genetics.de/_assets/170dbce1c3fbfd55ca69bb8024c29e6b/JavaScript/photoswipe.js?t=1777669470

1import PhotoSwipeLightbox from 'c3base/Lib/photoswipe/photoswipe-lightbox.esm.js';
2import PhotoSwipeDynamicCaption from 'c3base/Lib/photoswipe/photoswipe-dynamic-caption-plugin.esm.js';
3
4const commonConfig = {
5    closeTitle: window.c3?.translations?.photoswipe?.close ?? 'Close the gallery',
6    zoomTitle: window.c3?.translations?.photoswipe?.zoom ?? 'Zoom the image',
7    arrowPrevTitle: window.c3?.translations?.photoswipe?.prev ?? 'Go to the previous image',
8    arrowNextTitle: window.c3?.translations?.photoswipe?.next ?? 'Go to the next image',
9    errorMsg: window.c3?.translations?.photoswipe?.error ?? 'The image cannot be loaded',
10    indexIndicatorSep: ` ${window.c3?.translations?.photoswipe?.indexIndicator ?? 'of'} `,
11};
12
13const PhotoSwipe = () => import('../Lib/photoswipe/photoswipe.esm.js');
14
15/*
16<a href="/path/to/big/image.jpg"
17   rel="lightbox"
18   data-pswp-id="66"      < The ID of the lightbox group
19   data-pswp-width="1080"   < The dimensions of the big image
20   data-pswp-height="1080"  <-|
21>
22    <img ... >
23</a>
24 */
25
26function init() {
27    const lightboxElements = document.querySelectorAll('[rel^="lightbox"]');
28    /** @type {Set<string>} */
29    const lightboxGroupIds = new Set();
30
31    for (const element of lightboxElements) {
32        // add lightbox id (for legacy rendering)
33        if (!element.dataset.pswpId) {
34            const matches = element.rel.match(/lightbox\[(?<id>\d+)]/);
35            element.dataset.pswpId = matches.groups.id;
36        }
37
38        // add lightbox dimensions (for legacy rendering)
39        if (!element.dataset.pswpWidth) {
40            const image = element.querySelector('img');
41            element.dataset.pswpWidth = image.width.toString();
42            element.dataset.pswpHeight = image.height.toString();
43        } else if (!element.dataset.pswpHeight) {
44            // use aspect ratio of the image for the height, if no height is explicitly set
45
46            const image = element.querySelector('img');
47            const pswpWidth = parseInt(element.dataset.pswpWidth);
48            const multiplier = pswpWidth / image.width;
49            element.dataset.pswpHeight = (image.height * multiplier).toString();
50        }
51
52        lightboxGroupIds.add(element.dataset.pswpId);
53    }
54
55    for (const id of lightboxGroupIds) {
56        const lightbox = new PhotoSwipeLightbox({
57            ...commonConfig,
58            gallery: 'body',
59            children: `[data-pswp-id="${id}"]`,
60            pswpModule: PhotoSwipe,
61        });
62
63        /*
64         * caption priority:
65         * 1. data-pswp-description="description abc"
66         * 2. data-pswp-description-selector="#some-description-selector"
67         * 3. the `figcaption` of the current `figure` element (if we are in a `figure` element)
68         */
69        new PhotoSwipeDynamicCaption(lightbox, {
70            type: 'below',
71            captionContent: slide => {
72                return (
73                    slide.data.element.dataset.pswpDescription ??
74                    getDescriptionBySelector(slide) ??
75                    slide.data.element.closest('figure')?.querySelector('figcaption')?.textContent ??
76                    ''
77                );
78            },
79        });
80
81        lightbox.init();
82    }
83}
84
85/**
86 * @param {{data: {element: HTMLAnchorElement}}} slide
87 * @return {string|null}
88 */
89function getDescriptionBySelector(slide) {
90    const selector = slide.data.element.dataset.pswpDescriptionSelector;
91    if (!selector) {
92        return null;
93    }
94    return document.querySelector(selector)?.textContent;
95}
96
97export {init, PhotoSwipeLightbox, PhotoSwipe};