diff --git a/README.md b/README.md index 849f32e3..b730fbcb 100644 --- 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 index a46511bd..1a8b32a3 100644 --- a/src/index.html +++ b/src/index.html @@ -250,6 +250,7 @@
new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="events"]'));
@@ -271,6 +272,10 @@ Events
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);
});
diff --git a/src/index.ts b/src/index.ts
index b355bcba..76459b9b 100644
--- 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
index 346b9703..8c5fff93 100644
--- 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
index f4ac41d3..a34b32a5 100644
--- 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
index 489ffa0b..46affde0 100644
--- 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;