(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/18752505?download=true", alt: "image1.png" }, { src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18752535?download=true", alt: "image2.png" }, { src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18752565?download=true", alt: "image3.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: '