Added error event

marekdedic · Dec 25, 2024 · ed792c2 · ed792c2
1 parent 144c953
commit ed792c2
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -148,6 +148,10 @@ document.addEventListener("ilb:next", (e) => {
     console.log("Next image: ");
     console.log(e.target);
 });
+document.addEventListener("ilb:error", (e) => {
+    console.log("Error loading image");
+    console.log(e.detail.target);
+});
 ```
 
 ## Using multiple lighboxes

diff --git a/src/index.html b/src/index.html
@@ -250,6 +250,7 @@ <h2>Events</h2>
                     <li><a href="images/demo1.jpg" data-imagelightbox="events"><img src="images/thumb1.jpg"></a></li>
                     <li><a href="images/demo2.jpg" data-imagelightbox="events"><img src="images/thumb2.jpg"></a></li>
                     <li><a href="images/demo3.jpg" data-imagelightbox="events"><img src="images/thumb3.jpg"></a></li>
+                    <li><a href="images/demo44.jpg" data-imagelightbox="events"><img src="images/thumb4.jpg"></a></li>
                 </ul>
                 <pre><code>
 new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="events"]'));
@@ -271,6 +272,10 @@ <h2>Events</h2>
 document.addEventListener("ilb:next", (e) => {
   console.log("ilb:next");
   console.log(e.target);
+});
+document.addEventListener("ilb:error", (e) => {
+  console.log("ilb:error");
+  console.log(e.detail);
 });
                 </code></pre>
             </section>

diff --git a/src/index.ts b/src/index.ts
@@ -144,4 +144,8 @@ document.addEventListener("ilb:next", (e) => {
   console.log("ilb:next");
   console.log(e.target);
 });
+document.addEventListener("ilb:error", (e) => {
+  console.log("ilb:error");
+  console.log(e.detail);
+});
 /* eslint-enable no-console */
diff --git a/src/lib/ImageView.ts b/src/lib/ImageView.ts
@@ -32,6 +32,14 @@ export function ImageView(
   let swipeDiff = 0;
   let imageElement: HTMLImageElement | HTMLVideoElement =
     document.createElement("img");
+  imageElement.addEventListener("error", (e) => {
+    getContainer().dispatchEvent(
+      new CustomEvent("ilb:error", {
+        bubbles: true,
+        detail: { target: e.target },
+      }),
+    );
+  });
   imageElement.setAttribute("id", "ilb-image");
   imageElement.setAttribute("src", image.getAttribute("href") ?? "");
   imageElement.setAttribute("srcset", image.dataset["ilb2Srcset"] ?? "");

diff --git a/src/lib/imagelightbox.jquery.ts b/src/lib/imagelightbox.jquery.ts
@@ -52,3 +52,6 @@ doc.on("ilb:previous", (e) => {
 doc.on("ilb:next", (e) => {
   $("#ilb-container").trigger("next.ilb2", e.target);
 });
+doc.on("ilb:error", (e) => {
+  $("#ilb-container").trigger("error.ilb2", e.detail);
+});
diff --git a/types/imagelightbox.d.ts b/types/imagelightbox.d.ts
@@ -1,3 +1,15 @@
+declare global {
+  interface Document {
+    addEventListener(
+      type: "ilb:error",
+      listener: (
+        this: Document,
+        ev: CustomEvent<{ target: HTMLImageElement }>,
+      ) => void,
+    ): void;
+  }
+}
+
 interface ILBOptions {
   activity: boolean;
   allowedTypes: string;