From d99394dd1f731b87e22bbd3d6ff81b6eb7025e6f Mon Sep 17 00:00:00 2001
From: Valik <valik3201@gmail.com>
Date: Mon, 6 Nov 2023 15:59:46 +0100
Subject: [PATCH] Included the `SimpleLightbox` library

---
 01-gallery.html   |  2 ++
 02-lightbox.html  | 21 +++++++++++++++++++++
 js/01-gallery.js  |  1 -
 js/02-lightbox.js | 37 ++++++++++++++++++++++++++++++++++---
 4 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/01-gallery.html b/01-gallery.html
index ffe78e1..1a13d42 100644
--- a/01-gallery.html
+++ b/01-gallery.html
@@ -66,7 +66,9 @@ <h1 class="title">Image Gallery</h1>
     <!-- Add gallery items to this list -->
     <ul class="gallery"></ul>
 
+    <!-- Include BasicLightbox library -->
     <script src="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.4/dist/basicLightbox.min.js"></script>
+    <!-- Include external JavaScript as a module -->
     <script src="js/01-gallery.js" type="module"></script>
   </body>
 </html>
diff --git a/02-lightbox.html b/02-lightbox.html
index 4f568cf..232e579 100644
--- a/02-lightbox.html
+++ b/02-lightbox.html
@@ -31,6 +31,16 @@
     <meta name="msapplication-TileColor" content="#f7df1e" />
     <meta name="theme-color" content="#10162F" />
     <title>SimpleLightbox library</title>
+
+    <!-- Including SimpleLightbox CSS from a CDN -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/simplelightbox/2.14.2/simple-lightbox.min.css"
+      integrity="sha512-FaAQujRxLMvw+BkmGN3w7u9EdQQr1t0vQoY8KDh09+6SFaWSTe+KrT8oCWg25X91hytm5c5BTmiSGQejkraaZg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <!-- External CSS for common styles -->
     <link rel="stylesheet" href="css/common.css" />
     <link rel="stylesheet" href="css/styles.css" />
   </head>
@@ -54,9 +64,20 @@
       >
     </p>
 
+    <h1 class="title">SimpleLightbox Gallery</h1>
+
     <!-- Add gallery items to this list -->
     <ul class="gallery"></ul>
 
+    <!-- Include SimpleLightbox library -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/simplelightbox/2.14.2/simple-lightbox.min.js"
+      integrity="sha512-/4kQE5RJQYHRhUiK+CZS8UhaJTnLmQkDuf8lOhiP2xLdjthA/rm0VqqWjcyelIx+NDyNHFmtqvuIgOFQnI34WA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+
+    <!-- Include external JavaScript as a module -->
     <script src="js/02-lightbox.js" type="module"></script>
   </body>
 </html>
diff --git a/js/01-gallery.js b/js/01-gallery.js
index 01a2cf0..3d4bce2 100644
--- a/js/01-gallery.js
+++ b/js/01-gallery.js
@@ -1,5 +1,4 @@
 import { galleryItems } from "./gallery-items.js";
-// Change code below this line
 
 // Create Gallery
 const galleryContainer = document.querySelector(".gallery");
diff --git a/js/02-lightbox.js b/js/02-lightbox.js
index 5a01ac2..08d38d3 100644
--- a/js/02-lightbox.js
+++ b/js/02-lightbox.js
@@ -1,4 +1,35 @@
-import { galleryItems } from './gallery-items.js';
-// Change code below this line
+import { galleryItems } from "./gallery-items.js";
 
-console.log(galleryItems);
+// Create Gallery
+const galleryContainer = document.querySelector(".gallery");
+
+const galleryImage = galleryItems.map((element) => {
+  const galleryItem = document.createElement("li");
+  galleryItem.classList.add("gallery__item");
+
+  const galleryLink = document.createElement("a");
+  galleryLink.classList.add("galery__link");
+  galleryLink.href = element.original;
+
+  const image = document.createElement("img");
+  image.classList.add("gallery__image");
+  image.src = element.preview;
+  image.alt = element.description;
+  //   image.dataset.source = element.original;
+
+  galleryLink.appendChild(image);
+  galleryItem.appendChild(galleryLink);
+
+  return galleryItem;
+});
+
+galleryContainer.append(...galleryImage);
+
+// Initialization of SimpleLightbox
+const gallery = new SimpleLightbox(".gallery a", {
+  captions: true,
+  captionsData: "alt",
+  captionDelay: 250,
+  animationSpeed: 100,
+  fadeSpeed: 150,
+});