(function () { let currentIndex = 0; let images = []; const carouselNextBtn = document.querySelector('.nav-button.next'); const carouselPrevBtn = document.querySelector('.nav-button.prev'); const carouselMainImage = document.getElementById('main-image'); const thumbnailsContainer = document.querySelector('.thumbnails'); const viewFullGalleryBtn = document.querySelector('.view-full-gallery'); function loadImages() { images = [ { src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/30096264?download=true", alt: "step-one.png" }, { src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/30096287?download=true", alt: "step-two.png" }, { src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/30096309?download=true", alt: "step-three.png" }, { src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/30096332?download=true", alt: "banners.png" } ] } function renderThumbnails() { const maxVisible = 5; let start = currentIndex - 2; if (start < 0) start = 0; if (start > images.length - maxVisible) start = Math.max(images.length - maxVisible, 0); const end = Math.min(images.length, start + maxVisible); thumbnailsContainer.innerHTML = ''; for (let i = start; i < end; i++) { const img = document.createElement('img'); img.className = 'thumbnail' + (i === currentIndex ? ' selected' : ''); img.src = images[i].src; img.alt = images[i].alt; img.dataset.index = i; img.addEventListener('click', () => updateMainImage(i)); thumbnailsContainer.appendChild(img); } } function updateMainImage(index) { currentIndex = index; carouselMainImage.src = images[index].src; carouselMainImage.alt = images[index].alt; carouselPrevBtn.disabled = index === 0; carouselNextBtn.disabled = index === images.length - 1; renderThumbnails(); } function setupNavigationButtons() { carouselPrevBtn.addEventListener('click', () => { if (currentIndex > 0) updateMainImage(currentIndex - 1); }); carouselNextBtn.addEventListener('click', () => { if (currentIndex < images.length - 1) updateMainImage(currentIndex + 1); }); } function setupModalTriggers() { carouselMainImage.addEventListener('click', () => openModalGallery(currentIndex)); if (viewFullGalleryBtn) { viewFullGalleryBtn.addEventListener('click', () => openModalGallery(currentIndex)); } } function openModalGallery(startIndex) { let current = startIndex; const template = document.getElementById('modal-gallery'); const clone = template.content.cloneNode(true); const container = document.createElement('div'); container.appendChild(clone); Liferay.Util.openModal({ bodyHTML: container.innerHTML, center: true, headerHTML: '<h2 class="modal-gallery-header" id="modal-header-title"><svg class="lexicon-icon lexicon-icon-picture" role="presentation" ><use xlink:href="https://marketplace.liferay.com/o/classic-theme/images/clay/icons.svg#picture" /></svg> Image <span id="modal-index-display"></span></h2>', size: "full-screen", onOpen: () => { const modalContainer = document.querySelector('.modal-content'); if (modalContainer) { modalContainer.classList.add('custom-gallery-modal'); } const modalImage = document.querySelector('[data-role="modal-image"]'); const modalNext = document.querySelector('[data-role="modal-next"]'); const modalPrev = document.querySelector('[data-role="modal-prev"]'); const indexDisplay = document.getElementById('modal-index-display'); function updateModalImage(index) { const img = images[index]; modalImage.src = img.src; modalImage.alt = img.alt; modalNext.disabled = index === images.length - 1; modalPrev.disabled = index === 0; if (indexDisplay) { indexDisplay.textContent = (index + 1) + ' van ' + images.length; } } modalNext.addEventListener('click', () => { if (current < images.length - 1) { current++; updateModalImage(current); } }); modalPrev.addEventListener('click', () => { if (current > 0) { current--; updateModalImage(current); } }); updateModalImage(current); } }); } function main() { loadImages(); setupNavigationButtons(); setupModalTriggers(); updateMainImage(0); } main(); })();