Merge pull request #1193 from marekdedic/html5-responsive-images

Added support fot HTML5 responsive images
marekdedic · Dec 24, 2024 · 144c953 · 144c953
2 parents 6ef7833 + 27194ec
commit 144c953
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 2 deletions.
diff --git a/src/index.html b/src/index.html
@@ -35,6 +35,29 @@ <h2>Basic example</h2>
 new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="basic"]'));
                 </code></pre>
 
+                <h2>HTML5 responsive image example</h2>
+                <ul data-testid="basic">
+                    <li>
+                        <a data-ilb2-srcset="images/demo1.jpg 1200w" data-ilb2-sizes="(min-width: 30px) 1200px" data-imagelightbox="responsive">
+                            <img src="images/thumb1.jpg">
+                        </a>
+                    </li>
+                    <li>
+                        <a data-ilb2-srcset="images/demo2.jpg 1200w" data-ilb2-sizes="(min-width: 30px) 1200px" data-imagelightbox="responsive">
+                            <img src="images/thumb2.jpg">
+                        </a>
+                    </li>
+                    <li>
+                        <a data-ilb2-srcset="images/demo3.jpg 1200w" data-ilb2-sizes="(min-width: 30px) 1200px" data-imagelightbox="responsive">
+                            <img src="images/thumb3.jpg">
+                        </a>
+                    </li>
+                </ul>
+                Add data-ilb2-srcset and data-ilb2-sizes to the link, containing the parameters of a HTML5 image tag.
+                <pre><code>
+new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="responsive"]'));
+                </code></pre>
+
                 <h2>Video support</h2>
                 <ul>
                     <li><a href="images/demo1.jpg" data-imagelightbox="video"><img src="images/thumb1.jpg"></a></li>

diff --git a/src/index.ts b/src/index.ts
@@ -7,6 +7,13 @@ new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="basic"]'), {
   ...(isTest && { animationSpeed: 0 }),
 });
 
+new ImageLightbox(
+  document.querySelectorAll('a[data-imagelightbox="responsive"]'),
+  {
+    ...(isTest && { animationSpeed: 0 }),
+  },
+);
+
 new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="video"]'), {
   ...(isTest && { animationSpeed: 0 }),
 });

diff --git a/src/lib/ImageView.ts b/src/lib/ImageView.ts
@@ -34,6 +34,8 @@ export function ImageView(
     document.createElement("img");
   imageElement.setAttribute("id", "ilb-image");
   imageElement.setAttribute("src", image.getAttribute("href") ?? "");
+  imageElement.setAttribute("srcset", image.dataset["ilb2Srcset"] ?? "");
+  imageElement.setAttribute("sizes", image.dataset["ilb2Sizes"] ?? "");
   const containerElement = document.createElement("div");
   containerElement.classList.add("ilb-image-container");
   let isVideoPreloaded: boolean | undefined = undefined;

diff --git a/src/lib/State.ts b/src/lib/State.ts
@@ -46,7 +46,7 @@ export function State(
   // The lightbox options
   options: ILBOptions,
   // The value of data-imagelightbox on the images
-  lightboxSet: string | undefined,
+  lightboxSet: string,
   initialImages: Array<HTMLAnchorElement>,
 ): State {
   // The clickable images in the lightbox
@@ -63,7 +63,7 @@ export function State(
 
   // !!! State initialization is at the bottom!
 
-  function set(): string | undefined {
+  function set(): string {
     return lightboxSet;
   }
 
@@ -133,6 +133,14 @@ export function State(
           "src",
           nextImage.getAttribute("href") ?? "",
         );
+        nextImageElement.setAttribute(
+          "srcset",
+          nextImage.dataset["ilb2Srcset"] ?? "",
+        );
+        nextImageElement.setAttribute(
+          "sizes",
+          nextImage.dataset["ilb2Sizes"] ?? "",
+        );
       }
       getContainer().dispatchEvent(new Event("ilb:loaded", { bubbles: true }));
     });
@@ -301,6 +309,7 @@ export function State(
         (element): boolean =>
           element.tagName.toLowerCase() === "a" &&
           (new RegExp(`.(${options.allowedTypes})$`, "i").test(element.href) ||
+            element.dataset["ilb2Srcset"] !== undefined ||
             element.dataset["ilb2Video"] !== undefined),
       );
     videoCache.add(validImages);