[feature] Photoswipe gallery (#740)

* implement photoswipe galleries

* dependency wrangling

* photoswipe-dynamic-caption plugin

1 files changed, 16 insertions, 1 deletions

diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js
index e761202bb..5c53a31bf 100644
--- a/web/source/frontend/index.js
+++ b/web/source/frontend/index.js
@@ -23,9 +23,24 @@
 // our frontend templates don't load the common bundle.js since it contains React etc
 // so we can't use any dependencies that would deduplicate with the other files
 
+const Photoswipe = require("photoswipe/dist/umd/photoswipe.umd.min.js");
+const PhotoswipeLightbox = require("photoswipe/dist/umd/photoswipe-lightbox.umd.min.js");
+const PhotoswipeCaptionPlugin = require("photoswipe-dynamic-caption-plugin").default;
+
+const lightbox = new PhotoswipeLightbox({
+	gallery: '.photoswipe-gallery',
+	children: 'a',
+	pswpModule: Photoswipe,
+});
+
+new PhotoswipeCaptionPlugin(lightbox, {
+	type: 'auto',
+});
+
+lightbox.init();
+
 Array.from(document.getElementsByClassName("spoiler-label")).forEach((label) => {
 	let checkbox = document.getElementById(label.htmlFor);
-	console.log(label, checkbox);
 	if (checkbox != undefined) {
 		function update() {
 			if(checkbox.checked) {