fix: img source

Author: solygambas

084-fluid image lightbox/index.html

@@ -13,30 +13,30 @@
     <div class="gallery">
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/tzSLATuyZzM/640x853"
+          src="https://images.unsplash.com/photo-1690790427878-ecf29d8b686b?q=80&w=640"
           alt="No elegance is possible without perfume"
-          data-original="tzSLATuyZzM/1920x2560"
+          data-original="1887"
         />
       </div>
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/GWQ2KmCXrQA/640x1137"
+          src="https://images.unsplash.com/photo-1696218614256-b74c0bcde0d5?q=80&w=640"
           alt="It is the unseen, unforgettable, ultimate accessory"
-          data-original="GWQ2KmCXrQA/1920x3413"
+          data-original="1887"
         />
       </div>
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/nkWnc-W_GP8/640x853"
+          src="https://images.unsplash.com/photo-1696218359361-b088f32f86b8?q=80&w=640"
           alt="A perfume is like a piece of clothing, a message"
-          data-original="nkWnc-W_GP8/1920x2560"
+          data-original="1887"
         />
       </div>
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/Ou00pmFFPKA/640x853"
+          src="https://images.unsplash.com/photo-1690790591188-3503c1a4dcb6?q=80&w=640"
           alt="Perfume is like a parenthesis, a moment of freedom"
-          data-original="Ou00pmFFPKA/1920x2560"
+          data-original="1887"
         />
       </div>
     </div>

084-fluid image lightbox/script.js

@@ -7,8 +7,10 @@ previews.forEach((preview) => {
   preview.addEventListener("click", () => {
     modal.classList.add("open");
     original.classList.add("open");
+    const originalUrl = new URL(preview.src);
     const originalSize = preview.getAttribute("data-original");
-    original.src = `https://source.unsplash.com/${originalSize}`;
+    originalUrl.searchParams.set("w", originalSize);
+    original.src = originalUrl.toString();
     caption.textContent = preview.alt;
     // Reference: https://stackoverflow.com/questions/35213147/difference-between-textcontent-vs-innertext
   });