| | |
| | | this.initModal(); |
| | | this.initListeners(); |
| | | this.initSubscribers(); |
| | | console.log('Gallery loaded...'); |
| | | } |
| | | /********************************************************************* |
| | | ELEMENTS |
| | |
| | | let selector = filtered ? `[data-gallery="${filtered}"]` : this.elements.imageSelector; |
| | | this.items = Array.from(document.querySelectorAll(selector)) |
| | | .map((img, index) => { |
| | | let caption = img.nextElementSibling && img.nextElementSibling.tagName === 'FIGCAPTION' ? |
| | | let caption = ''; |
| | | if (Object.hasOwn(img.dataset, 'caption')) { |
| | | caption = img.parentElement.querySelector(img.dataset.caption).cloneNode(true); |
| | | } else { |
| | | caption = img.nextElementSibling && img.nextElementSibling.tagName === 'FIGCAPTION' ? |
| | | img.nextElementSibling.textContent : |
| | | ''; |
| | | } |
| | | |
| | | |
| | | return { |
| | | id: img.dataset.id||index, |
| | |
| | | this.toggleGallery(true); |
| | | } else if (this.modal.isOpen) { |
| | | if (window.targetCheck(e, this.elements.gallery.nextButton)) { |
| | | console.log('Next'); |
| | | this.nextElement(); |
| | | } else if (window.targetCheck(e, this.elements.gallery.prevButton)) { |
| | | console.log('Previous'); |
| | | this.prevElement(); |
| | | } |
| | | } |
| | |
| | | galleryImg.src = item.src; // Fallback |
| | | galleryImg.alt = item.alt; |
| | | |
| | | window.removeChildren(this.ui.gallery.caption); |
| | | if (typeof item.caption === 'object') { |
| | | this.ui.gallery.caption.append(item.caption); |
| | | |
| | | } else { |
| | | this.ui.gallery.caption.textContent = item.caption; |
| | | } |
| | | |
| | | |
| | | |
| | | |