https://www.infoflora.ch/assets/js/photoswipe.js?v2026

1// Include Lightbox 
2import PhotoSwipeLightbox from 'https://unpkg.com/[email protected]/dist/photoswipe-lightbox.esm.js';
3// import PhotoSwipeDynamicCaption from 'https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm.js';
4
5function createPhotoSwipeLightBox(selector) {
6  return new PhotoSwipeLightbox({
7    gallery: selector,
8    children: 'a',
9    pswpModule: () => import('https://unpkg.com/[email protected]/dist/photoswipe.esm.js'),
10    loop: false,
11    showHideAnimationType: 'none',
12    zoom: false,
13    imageClickAction: 'next',
14    tapAction: 'next',
15    wheelToZoom: true,
16    modal: false
17  });
18}
19window.createPhotoSwipeLightBox = createPhotoSwipeLightBox;
20function pswpAddCaption(pswpLightbox) {
21  /* const captionPlugin = new PhotoSwipeDynamicCaption(pswpLightbox, {
22    type: 'below',
23  }); */
24  pswpLightbox.on('uiRegister', function () {
25    pswpLightbox.pswp.ui.registerElement({
26      name: 'custom-caption',
27      order: 9,
28      isButton: false,
29      appendTo: 'root',
30      html: 'Caption text',
31      onInit: (el, pswp) => {
32        pswpLightbox.pswp.on('change', () => {
33          const currSlideElement = pswpLightbox.pswp.currSlide.data.element;
34          let captionHTML = '';
35          if (currSlideElement) {
36            const hiddenCaption = currSlideElement.querySelector('.hidden-caption-content');
37            if (hiddenCaption) {
38              // get caption from element with class hidden-caption-content
39              captionHTML = hiddenCaption.innerHTML;
40            } else {
41              // get caption from alt attribute
42              captionHTML = currSlideElement.querySelector('img').getAttribute('alt');
43              const captionLink = currSlideElement.querySelector('img').getAttribute('data-pswp-caption-link');
44              if (captionLink) {
45                captionHTML = '<a href="' + captionLink + '">' + captionHTML + '</a>';
46              }
47            }
48          }
49          el.innerHTML = captionHTML || '';
50        });
51      }
52    });
53  });
54}
55window.pswpAddCaption = pswpAddCaption;
56
57const lightbox = new createPhotoSwipeLightBox('#info-gallery');
58lightbox.addFilter('itemData', (itemData, index) => {
59  const pswpDownload = itemData.element.dataset.pswpDownload;
60  if (pswpDownload) {
61    itemData.pswpDownload = pswpDownload;
62  }
63  return itemData;
64});
65lightbox.on('uiRegister', function () {
66  lightbox.pswp.ui.registerElement({
67    name: 'license-button',
68    order: 7,
69    isButton: true,
70    tagName: 'a',
71
72    html: '<img alt="Creative Commons License">',
73
74    onInit: (el, pswp) => {
75      el.setAttribute('target', '_blank');
76      el.setAttribute('rel', 'license');
77
78      pswp.on('change', () => {
79        el.href = pswp.currSlide.data.pswpDownload;
80        el.style.display = "none";
81        if (pswp.currSlide.data.element.attributes["license-image"] && !!pswp.currSlide.data.element.attributes["license-image"].value) {
82          el.style.display = "";
83          el.firstElementChild.setAttribute('src', pswp.currSlide.data.element.attributes["license-image"].value)
84        }
85      });
86    }
87  });
88});
89lightbox.on('uiRegister', function () {
90  lightbox.pswp.ui.registerElement({
91    name: 'download-button',
92    order: 8,
93    isButton: true,
94    tagName: 'a',
95
96    html: '<i class="lni lni-download"></i>',
97
98    onInit: (el, pswp) => {
99      el.setAttribute('download', '');
100      el.setAttribute('target', '_blank');
101      el.setAttribute('rel', 'noopener');
102
103      pswp.on('change', () => {
104        el.href = pswp.currSlide.data.element.attributes["original-image"].value;
105        el.style.display = pswp.currSlide.data.pswpDownload ? "" : "none";
106      });
107    }
108  });
109});
110pswpAddCaption(lightbox);
111lightbox.init();
112
113const lightboxEcology = new createPhotoSwipeLightBox('#ecology-gallery');
114lightboxEcology.addFilter('itemData', (itemData, index) => {
115  const pswpDownload = itemData.element.dataset.pswpDownload;
116  if (pswpDownload) {
117    itemData.pswpDownload = pswpDownload;
118  }
119  return itemData;
120});
121lightboxEcology.on('uiRegister', function () {
122  lightboxEcology.pswp.ui.registerElement({
123    name: 'license-button',
124    order: 7,
125    isButton: true,
126    tagName: 'a',
127

128    html: '<img alt="Creative Commons License">',
129
130    onInit: (el, pswp) => {
131      el.setAttribute('target', '_blank');
132      el.setAttribute('rel', 'license');
133
134      pswp.on('change', () => {
135        el.href = pswp.currSlide.data.pswpDownload;
136        el.style.display = "none";
137        if (pswp.currSlide.data.element.attributes[ "license-image" ] && !!pswp.currSlide.data.element.attributes[ "license-image" ].value) {
138          el.style.display = "";
139          el.firstElementChild.setAttribute('src', pswp.currSlide.data.element.attributes[ "license-image" ].value)
140        }
141      });
142    }
143  });
144});
145lightboxEcology.on('uiRegister', function () {
146  lightboxEcology.pswp.ui.registerElement({
147    name: 'download-button',
148    order: 8,
149    isButton: true,
150    tagName: 'a',
151
152    html: '<i class="lni lni-download"></i>',
153
154    onInit: (el, pswp) => {
155      el.setAttribute('download', '');
156      el.setAttribute('target', '_blank');
157      el.setAttribute('rel', 'noopener');
158
159      pswp.on('change', () => {
160        el.href = pswp.currSlide.data.element.attributes["original-image"].value;
161        el.style.display = pswp.currSlide.data.pswpDownload ? "" : "none";
162      });
163    }
164  });
165});
166pswpAddCaption(lightboxEcology);
167lightboxEcology.init();
168
169const lightboxAnatomy = new createPhotoSwipeLightBox('#anatomy-gallery');
170lightboxAnatomy.addFilter('itemData', (itemData, index) => {
171  const pswpDownload = itemData.element.dataset.pswpDownload;
172  if (pswpDownload) {
173    itemData.pswpDownload = pswpDownload;
174  }
175  return itemData;
176});
177lightboxAnatomy.on('uiRegister', function () {
178  lightboxAnatomy.pswp.ui.registerElement({
179    name: 'license-button',
180    order: 7,
181    isButton: true,
182    tagName: 'a',
183
184    html: '<img alt="Creative Commons License">',
185
186    onInit: (el, pswp) => {
187      el.setAttribute('target', '_blank');
188      el.setAttribute('rel', 'license');
189
190      pswp.on('change', () => {
191        el.href = pswp.currSlide.data.pswpDownload;
192        el.style.display = "none";
193        if (pswp.currSlide.data.element.attributes[ "license-image" ] && !!pswp.currSlide.data.element.attributes[ "license-image" ].value) {
194          el.style.display = "";
195          el.firstElementChild.setAttribute('src', pswp.currSlide.data.element.attributes[ "license-image" ].value)
196        }
197      });
198    }
199  });
200});
201lightboxAnatomy.on('uiRegister', function () {
202  lightboxAnatomy.pswp.ui.registerElement({
203    name: 'download-button',
204    order: 8,
205    isButton: true,
206    tagName: 'a',
207
208
209    html: '<i class="lni lni-download"></i>',
210
211    onInit: (el, pswp) => {
212      el.setAttribute('download', '');
213      el.setAttribute('target', '_blank');
214      el.setAttribute('rel', 'noopener');
215
216      pswp.on('change', () => {
217        el.href = pswp.currSlide.data.element.attributes["original-image"].value;
218        el.style.display = pswp.currSlide.data.pswpDownload ? "" : "none";
219      });
220    }
221  });
222});
223pswpAddCaption(lightboxAnatomy);
224lightboxAnatomy.init();
225
226const lightboxTypoCH = new createPhotoSwipeLightBox('#typoch-gallery');
227lightboxTypoCH.addFilter('itemData', (itemData, index) => {
228  const pswpDownload = itemData.element.dataset.pswpDownload;
229  if (pswpDownload) {
230    itemData.pswpDownload = pswpDownload;
231  }
232  return itemData;
233});
234lightboxTypoCH.on('uiRegister', function () {
235  lightboxTypoCH.pswp.ui.registerElement({
236    name: 'license-button',
237    order: 7,
238    isButton: true,
239    tagName: 'a',
240
241    html: '<img alt="Creative Commons License">',
242
243    onInit: (el, pswp) => {
244      el.setAttribute('target', '_blank');
245      el.setAttribute('rel', 'license');
246
247      pswp.on('change', () => {
248        el.href = pswp.currSlide.data.pswpDownload;
249        el.style.display = "none";
250        if (pswp.currSlide.data.element.attributes[ "license-image" ] && !!pswp.currSlide.data.element.attributes[ "license-image" ].value) {
251          el.style.display = "";
252          el.firstElementChild.setAttribute('src', pswp.currSlide.data.element.attributes[ "license-image" ].value)
253        }
254      });
255    }
256  });
257});
258lightboxTypoCH.on('uiRegister', function () {
259  lightboxTypoCH.pswp.ui.registerElement({
260    name: 'download-button',
261    order: 8,
262    isButton: true,
263    tagName: 'a',
264
265
266    html: '<i class="lni lni-download"></i>',
267
268    onInit: (el, pswp) => {
269      el.setAttribute('download', '');
270      el.setAttribute('target', '_blank');
271      el.setAttribute('rel', 'noopener');
272
273      pswp.on('change', () => {
274        el.href = pswp.currSlide.data.element.attributes["original-image"].value;
275        el.style.display = pswp.currSlide.data.pswpDownload ? "" : "none";
276      });
277    }
278  });
279});
280pswpAddCaption(lightboxTypoCH);
281lightboxTypoCH.init();
282
283const lightboxPhytosuisse = new createPhotoSwipeLightBox('#phytosuisse-gallery');
284lightboxPhytosuisse.addFilter('itemData', (itemData, index) => {
285  const pswpDownload = itemData.element.dataset.pswpDownload;
286  if (pswpDownload) {
287    itemData.pswpDownload = pswpDownload;
288  }
289  return itemData;
290});
291lightboxPhytosuisse.on('uiRegister', function () {
292  lightboxPhytosuisse.pswp.ui.registerElement({
293    name: 'license-button',
294    order: 7,
295    isButton: true,
296    tagName: 'a',
297

298    html: '<img alt="Creative Commons License">',
299
300    onInit: (el, pswp) => {
301      el.setAttribute('target', '_blank');
302      el.setAttribute('rel', 'license');
303
304      pswp.on('change', () => {
305        el.href = pswp.currSlide.data.pswpDownload;
306        el.style.display = "none";
307        if (pswp.currSlide.data.element.attributes[ "license-image" ] && !!pswp.currSlide.data.element.attributes[ "license-image" ].value) {
308          el.style.display = "";
309          el.firstElementChild.setAttribute('src', pswp.currSlide.data.element.attributes[ "license-image" ].value)
310        }
311      });
312    }
313  });
314});
315lightboxPhytosuisse.on('uiRegister', function () {
316  lightboxPhytosuisse.pswp.ui.registerElement({
317    name: 'download-button',
318    order: 8,
319    isButton: true,
320    tagName: 'a',
321
322
323    html: '<i class="lni lni-download"></i>',
324
325    onInit: (el, pswp) => {
326      el.setAttribute('download', '');
327      el.setAttribute('target', '_blank');
328      el.setAttribute('rel', 'noopener');
329
330      pswp.on('change', () => {
331        el.href = pswp.currSlide.data.element.attributes["original-image"].value;
332        el.style.display = pswp.currSlide.data.pswpDownload ? "" : "none";
333      });
334    }
335  });
336});
337pswpAddCaption(lightboxPhytosuisse);
338lightboxPhytosuisse.init();