| | |
| | | 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 = 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 |
| | | }; |
| | | }); |
| | | } |
| | |
| | | galleryImg.src = item.src; // Fallback |
| | | galleryImg.alt = item.alt; |
| | | |
| | | // ALWAYS load full resolution for zoom quality |
| | | this.ui.gallery.caption.textContent = item.caption; |
| | | |
| | | |
| | | |
| | | if (item.full && item.full !== item.src) { |
| | | const fullImg = new Image(); |
| | | fullImg.onload = () => { |