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 @@

Events

  • +
  • 
     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;