| | |
| | | this.initModal(); |
| | | this.initListeners(); |
| | | this.initSubscribers(); |
| | | console.log('Gallery loaded...'); |
| | | } |
| | | /********************************************************************* |
| | | ELEMENTS |
| | |
| | | image: '.image', |
| | | leftImage: '.image-left', |
| | | rightImage: '.image-right', |
| | | counter: '.counter' |
| | | counter: '.counter', |
| | | caption: 'details .item-info' |
| | | }, |
| | | } |
| | | this.ui = window.uiFromSelectors(this.elements); |
| | |
| | | let selector = filtered ? `[data-gallery="${filtered}"]` : this.elements.imageSelector; |
| | | this.items = Array.from(document.querySelectorAll(selector)) |
| | | .map((img, index) => { |
| | | 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, |
| | | srcset: img.srcset || img.src, // Clone the srcset from page |
| | |
| | | src: img.currentSrc || img.src, // Fallback |
| | | full: img.dataset.full || img.src, |
| | | alt: img.alt || '', |
| | | element: img |
| | | element: img, |
| | | caption: caption |
| | | }; |
| | | }); |
| | | } |
| | |
| | | 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; |
| | | |
| | | // ALWAYS load full resolution for zoom quality |
| | | 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; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | if (item.full && item.full !== item.src) { |
| | | const fullImg = new Image(); |
| | | fullImg.onload = () => { |