Merge pull request #2 from Valik3201/simple-lightbox-library

Added `SimpleLightbox` npm dependency

package.json

@@ -18,7 +18,8 @@
     "url": "https://github.com/Valik3201/goit-js-hw-08/issues"
   },
   "dependencies": {
-    "modern-normalize": "^1.1.0"
+    "modern-normalize": "^1.1.0",
+    "simplelightbox": "^2.14.2"
   },
   "devDependencies": {
     "@parcel/packager-raw-url": "^2.6.0",

src/01-gallery.html

@@ -50,7 +50,7 @@
     <h1 class="title">SimpleLightbox Library</h1>
 
     <!-- Add gallery items to this list -->
-    <ul class="gallery"></ul>
+    <div class="gallery"></div>
 
     <script src="js/01-gallery.js" type="module"></script>
   </body>

src/js/01-gallery.js

@@ -1,5 +1,42 @@
+// Described in documentation;
+import SimpleLightbox from 'simplelightbox';
+
+// Additional styles import
+import 'simplelightbox/dist/simple-lightbox.min.css';
+
 // Add imports above this line
 import { galleryItems } from './gallery-items';
 // Change code below this line
 
-console.log(galleryItems);
+// Create Gallery
+const galleryContainer = document.querySelector('.gallery');
+
+const galleryImage = galleryItems.map(element => {
+  const galleryItem = document.createElement('div');
+  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;
+
+  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,
+});