(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/18455791?download=true",
alt: "About.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455823?download=true",
alt: "Blog.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455855?download=true",
alt: "footer.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455887?download=true",
alt: "Home.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455919?download=true",
alt: "language-bar.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455951?download=true",
alt: "Portfolio.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455983?download=true",
alt: "Resume.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18456015?download=true",
alt: "theme-settings.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) + ' jostakin ' + 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();
})();
</svg></span>
</button>
<img alt = "About.png" id = "main-image" src = "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455791?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>
</div>
<div class="thumbnails-wrapper">
<div class="thumbnails align-items-center"></div>
<button class="view-full-gallery">
<span class="title">
Full Gallery
</span>
<span class="subtitle">
8 Photos
</span>
</button>
</div>
</div>
<template id="modal-gallery">
<div class="modal-gallery-content">
<button class="modal-prev" data-role="modal-prev">
<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> </button>
<img class="modal-image" data-role="modal-image" />
<button class="modal-next" data-role="modal-next">
<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> </button>
</div>
</template>
<script >
(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/18455791?download=true",
alt: "About.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455823?download=true",
alt: "Blog.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455855?download=true",
alt: "footer.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455887?download=true",
alt: "Home.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455919?download=true",
alt: "language-bar.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455951?download=true",
alt: "Portfolio.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18455983?download=true",
alt: "Resume.png"
},
{
src: "http://marketplace.lxc.liferay.com/o/commerce-media/accounts/-1/images/18456015?download=true",
alt: "theme-settings.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) + ' / ' + 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();
})();
</script>
<style >
.carousel-container img {
cursor: pointer;
object-fit: contain;
}
.custom-gallery-modal button:disabled {
cursor: default;
opacity: 0.4;
pointer-events: none;
}
.custom-gallery-modal {
background-color: #282934 !important;
border-bottom: none;
color: white !important;
}
.custom-gallery-modal .liferay-modal-body {
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
.custom-gallery-modal .close {
color: white !important;
margin-right: 16px !important;
}
.lexicon-icon-overwide .lexicon-icon {
height: 2em;
margin: 0px !important;
}
.custom-gallery-modal{
height: 80% !important;
}
.main-image-wrapper {
align-items: center;
display:flex;
justify-content: center;
position: relative;
width: 902px;
height: 454px;
}
.main-image-wrapper img {
border-radius: 8px;
max-height: 100%;
}
.main-image-wrapper:hover .nav-button {
opacity: 1;
pointer-events: auto;
}
.main-image-wrapper:hover .nav-button:disabled{
cursor: default;
opacity: 0.4;
}
.modal-image {
aspect-ratio: 16/9;
object-fit: contain;;
border-radius: 8px;
max-width: 100vh !important;
}
.modal-gallery-header .lexicon-icon {
fill: #FFC124 !important;
margin-right: 8px !important;
width: 16px !important;
}
.modal-gallery-header {
padding: 16px !important;
}
.modal-prev,
.modal-next {
align-items: center;
background: rgba(105, 102, 102, 0.4) !important;
border-radius: 50%;
border: none;
display: flex;
font-size: 1.6rem;
justify-content: center;
padding: 14px !important;
position: absolute;
top: 45%;
}
.modal-prev .lexicon-icon,
.modal-next .lexicon-icon {
margin-top: 0px !important;
}
.modal-next {
right: 24px;
}
.modal-prev {
left: 24px;
}
.nav-button {
background: rgba(0,0,0,0.4);
border-radius: 50%;
border: none;
color: white;
cursor: pointer;
font-size: 1rem;
opacity: 0;
padding: 0 8px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s ease;
user-select: none;
}
.nav-button.prev {
left: 10px;
}
.nav-button.next {
right: 10px;
}
.thumbnail {
border-radius: 12px;
border: 2px solid transparent;
cursor: pointer;
height: 86px;
object-fit: cover;
opacity: 0.6;
transition:
border-color 250ms ease-out,
opacity 250ms ease-out;
width: 142px;
}
.thumbnail.selected,
.thumbnail:hover {
border-color: #8FB5FF;
opacity: 1;
}
.thumbnail.selected{
height: 102px;
}
.thumbnails {
display: flex;
gap: 8px;
overflow-x: auto;
}
.thumbnails-wrapper {
align-items: center;
display: flex;
justify-content: flex-start;
margin-top: 24px;
max-height: 86px;
max-width: 902px;
}
.view-full-gallery {
background-color: white;
border-radius: 12px;
border: 1px solid #E2E2E4;
color: #2563eb;
cursor: pointer;
display: flex;
flex-direction: column;
height: 86px;
justify-content: center;
margin-left: 8px;
min-width: 152px;
transition: background-color 0.3s ease,
box-shadow 0.3s ease,
border-color 250ms ease-out;
}
.view-full-gallery .subtitle {
color: #6b7280;
font-size: 12px;
font-weight: 400;
line-height: 1;
}
.view-full-gallery .title {
font-size: 16px;
font-weight: 600;
line-height: 1;
margin-bottom: 4px;
}
.view-full-gallery:hover {
background-color: #f3f4f6;
box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
border: 2px solid rgb(143, 181, 255);
}
</style>
