Included the SimpleLightbox library

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>

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>

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");

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,
+});