update

Author: last-endcode

OOP_Projects/gallery/starter/app.js

@@ -28,6 +28,12 @@ function Gallery(element) {
   this.closeBtn = getElement('.close-btn');
 
   // Bind function
+  // pointing to Gallery
+  this.closeModal = this.closeModal.bind(this);
+  this.prevImage = this.prevImage.bind(this);
+  this.nextImage = this.nextImage.bind(this);
+  this.chooseImage = this.chooseImage.bind(this);
+
   // ref u can use this one
   let self = this; //dia merujuk pada Gallery
   // ** Click
@@ -50,17 +56,23 @@ Gallery.prototype.openModal = function (selectedImage, list) {
   // *** invoke this.setMainImage
   this.setMainImage(selectedImage);
   // *** map modalImages
-  // show display modal-image
+  // menampilkan gambar yg diklik dibawah agar muncul sesuai ururat
+  // jadi gambar yg diklik ada ikut juga dibawah
   this.modalImages.innerHTML = list
     .map(function (image) {
+      // console.log(image);
       return `<img src="${
         image.src
-      }" title="${image.title}" data-id="${image.dataset.id}" class="${selectedImage.dataset.id === image.dataset.id ? 'modal-img selected' : 'modal-img'}"/>`;
+      }" title="${image.title}" data-id="${image.dataset.id}" class="${selectedImage.dataset.id === image.dataset.id ? 'modal-img selected' : 'modal-img'}" />`;
     })
     .join('');
-
+  // console.log(list); array img
   // *** invoke this.modal
   this.modal.classList.add('open');
+  this.closeBtn.addEventListener('click', this.closeModal);
+  this.prevBtn.addEventListener('click', this.prevImage);
+  this.nextBtn.addEventListener('click', this.nextImage);
+  this.modalImages.addEventListener('click', this.chooseImage);
 };
 
 // for main-image, and image-name
@@ -70,6 +82,44 @@ Gallery.prototype.setMainImage = function (selectedImage) {
   this.imgName.textContent = selectedImage.title;
 };
 
+Gallery.prototype.closeModal = function () {
+  // close modal
+  this.modal.classList.remove('open');
+  this.closeBtn.removeEventListener('click', this.closeModal);
+  this.prevBtn.removeEventListener('click', this.prevImage);
+  this.nextBtn.removeEventListener('click', this.nextImage);
+};
+
+// for nextImage mainImg yang dipilih
+Gallery.prototype.nextImage = function () {
+  const selected = this.modalImages.querySelector('.selected');
+  const next =
+    selected.nextElementSibling || this.modalImages.firstElementChild;
+  selected.classList.remove('selected');
+  next.classList.add('selected');
+  this.setMainImage(next);
+};
+
+Gallery.prototype.prevImage = function () {
+  const selected = this.modalImages.querySelector('.selected');
+  const prev = selected.previousSibling || this.modalImages.lastChild;
+  selected.classList.remove('selected');
+  prev.classList.add('selected');
+  this.setMainImage(prev);
+};
+
+// for Choose Image
+Gallery.prototype.chooseImage = function (e) {
+  const selected = this.modalImages.querySelector('.selected');
+  // jika target sama dgn modal-img
+  //
+  if (e.target.classList.contains('modal-img')) {
+    // console.log(e.target); check gambar dibawah maka hasilnya adalah sesuai dgn gambar diklik
+    selected.classList.remove('selected');
+    this.setMainImage(e.target);
+    e.target.classList.add('selected');
+  }
+};
 // create new instance object
 const nature = new Gallery(getElement('.nature'));
 const city = new Gallery(getElement('.city'));

OOP_Projects/gallery/starter/index.html

@@ -19,21 +19,21 @@
         src="./images/nature-1.jpeg"
         title="nature-1"
         class="img"
-        data-set="1"
+        data-id="1"
         alt="nature"
       />
       <img
         src="./images/nature-2.jpeg"
         title="nature-2"
         class="img"
-        data-set="2"
+        data-id="2"
         alt="nature"
       />
       <img
         src="./images/nature-3.jpeg"
         title="nature-3"
         class="img"
-        data-set="3"
+        data-id="3"
         alt="nature"
       />
     </section>
@@ -43,35 +43,35 @@
         src="./images/city-1.jpeg"
         title="city-1"
         class="img"
-        data-set="1"
+        data-id="1"
         alt="city"
       />
       <img
         src="./images/city-2.jpeg"
         title="city-2"
         class="img"
-        data-set="2"
+        data-id="2"
         alt="city"
       />
       <img
         src="./images/city-3.jpeg"
         title="city-3"
         class="img"
-        data-set="3"
+        data-id="3"
         alt="city"
       />
       <img
         src="./images/city-4.jpeg"
         title="city-4"
         class="img"
-        data-set="4"
+        data-id="4"
         alt="city"
       />
       <img
         src="./images/city-5.jpeg"
         title="city-5"
         class="img"
-        data-set="5"
+        data-id="5"
         alt="city"
       />
     </section>
@@ -98,14 +98,14 @@ <h3 class="image-name">image name</h3>
             src="./images/city-5.jpeg"
             title="city-5"
             class="modal-img"
-            data-set="5"
+            data-id="5"
             alt=""
           />
           <img
             src="./images/city-4.jpeg"
             title="city-4"
             class="modal-img selected"
-            data-set="4"
+            data-id="4"
             alt=""
           />
         </div>