Update: Add event listener

README.md

@@ -48,6 +48,18 @@ There is one global variable who get set during the intialisation:
 `lightbox.init()`). With this, you can add you own [event listener](https://photoswipe.com/events/) or trigger
 [methods](https://photoswipe.com/methods/).
 
+## Javascript event listener
+
+If you dispatch the event `neos-photoswipe:init` all type of lightboxes get initialized. Great if you work in AJAX
+enviroments. You can also activate a specific type of lightbox: `neos-photoswipe.images:init`,
+`neos-photoswipe.fetch:init` or `neos-photoswipe.template:init`.
+
+Example:
+
+```js
+window.dispatchEvent(new Event("neos-photoswipe:init"));
+```
+
 ## Alter generated markup
 
 ### Adding custom attributes to the PhotoSwipe container

Resources/Private/Assets/Fetch.js

@@ -1,5 +1,12 @@
 import PhotoSwipeLightbox from "photoswipe/lightbox";
-import { getPswpContainer, dispatchEvent, createElement, getDataOptions, setPswpContainerAttributes } from "./Helper";
+import {
+    getPswpContainer,
+    dispatchEvent,
+    createElement,
+    getDataOptions,
+    setPswpContainerAttributes,
+    addEventListener,
+} from "./Helper";
 
 const optionsFromNeos = { ...getDataOptions("photoswipeI18n"), ...getDataOptions("photoswipeFetchOptions") };
 
@@ -116,8 +123,14 @@ function toggleLoadingClass(show = true) {
     getPswpContainer()?.classList.toggle("pswp--fetch-loading", show);
 }
 
+const lightbox = init();
+
+addEventListener("fetch", () => {
+    lightbox.init();
+});
+
 window.neosPhotoSwipe = window.neosPhotoSwipe || {};
 window.neosPhotoSwipe.fetch = {
     init,
-    lightbox: init(),
+    lightbox,
 };

Resources/Private/Assets/Helper.js

@@ -51,4 +51,9 @@ function createElement(markupOrNode, wrappingClass) {
     return element;
 }
 
-export { getPswpContainer, dispatchEvent, createElement, getDataOptions, setPswpContainerAttributes };
+function addEventListener(type, callback) {
+    const listener = ["neos-photoswipe:init", `neos-photoswipe.${type}:init`];
+    listener.forEach((event) => window.addEventListener(event, callback, true));
+}
+
+export { getPswpContainer, dispatchEvent, createElement, getDataOptions, setPswpContainerAttributes, addEventListener };

Resources/Private/Assets/Main.js

@@ -1,5 +1,5 @@
 import PhotoSwipeLightbox from "photoswipe/lightbox";
-import { dispatchEvent, getDataOptions, setPswpContainerAttributes } from "./Helper";
+import { dispatchEvent, getDataOptions, setPswpContainerAttributes, addEventListener } from "./Helper";
 
 const optionsFromNeos = { ...getDataOptions("photoswipeI18n"), ...getDataOptions("photoswipeOptions") };
 
@@ -21,10 +21,16 @@ function init(options = {}) {
     return lightbox;
 }
 
+const lightbox = init();
+
+addEventListener("images", () => {
+    lightbox.init();
+});
+
 window.neosPhotoSwipe = window.neosPhotoSwipe || {};
 window.neosPhotoSwipe.images = {
     init,
-    lightbox: init(),
+    lightbox,
 };
 
 export default init;

Resources/Private/Assets/Template.js

@@ -1,5 +1,12 @@
 import PhotoSwipeLightbox from "photoswipe/lightbox";
-import { getPswpContainer, dispatchEvent, createElement, getDataOptions, setPswpContainerAttributes } from "./Helper";
+import {
+    getPswpContainer,
+    dispatchEvent,
+    createElement,
+    getDataOptions,
+    setPswpContainerAttributes,
+    addEventListener,
+} from "./Helper";
 
 const optionsFromNeos = { ...getDataOptions("photoswipeI18n"), ...getDataOptions("photoswipeTemplateOptions") };
 
@@ -63,8 +70,14 @@ function init(options = {}) {
     return lightbox;
 }
 
+const lightbox = init();
+
+addEventListener("template", () => {
+    lightbox.init();
+});
+
 window.neosPhotoSwipe = window.neosPhotoSwipe || {};
 window.neosPhotoSwipe.template = {
     init,
-    lightbox: init(),
+    lightbox,
 };