(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/18445862?download=true", alt: "Image2.png" }, { src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18445890?download=true", alt: "Image3.png" }, { src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18445918?download=true", alt: "Image4.png" }, { src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18445946?download=true", alt: "Image5.png" }, { src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18445974?download=true", alt: "Image6.png" }, { src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18446033?download=true", alt: "Image1.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: '

.description-content { font-size: 18px; line-height: 32px; } .title { font-size: 24px; font-weight: 600; }

', 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) + ' de ' + 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(); })();