(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/18375640?download=true",
alt: "1.jpg"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18375680?download=true",
alt: "2.jpg"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18375720?download=true",
alt: "3.jpg"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18375760?download=true",
alt: "4.jpg"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18375800?download=true",
alt: "5.jpg"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18375840?download=true",
alt: "6.jpg"
}
]
}
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) + ' 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();
})();
<div class = "main-image-wrapper">
<button class = "nav-button prev" aria-label = "Previous Image">
<span class = "lexicon-icon-overwide"> <svg class="lexicon-icon lexicon-icon-angle-left" role="presentation" ><use xlink:href="https://marketplace.liferay.com/o/classic-theme/images/clay/icons.svg#angle-left" /></svg></span>
</button>
<img alt = "1.jpg" id = "main-image" src = "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/30536846?download=true" />
<button class="nav-button next" aria-label="Next Image">
<span class="lexicon-icon-overwide"> <svg class="lexicon-icon lexicon-icon-angle-right" role="presentation" ><use xlink:href="https://marketplace.liferay.com/o/classic-theme/images/clay/icons.svg#angle-right" /></svg></span>
</button>
