Video Galerie Více fotek (13) × ❮❯   document.addEventListener('DOMContentLoaded', () => { const modal = document.querySelector('.lawn-modal'); const modalImg = modal.querySelector('.lawn-modal-image'); const close = modal.querySelector('.lawn-close'); const prev = modal.querySelector('.lawn-prev'); const next = modal.querySelector('.lawn-next'); const counter = modal.querySelector('.lawn-counter'); const openGallery = document.getElementById('openGallery'); const morePhotosBtn = openGallery.querySelector('.more-photos-btn');... Celý popis

Koupit za 13 990 Kč

Popis

Video

Galerie

Více fotek (13)

×

❮❯

 

document.addEventListener('DOMContentLoaded', () => {
const modal = document.querySelector('.lawn-modal');
const modalImg = modal.querySelector('.lawn-modal-image');
const close = modal.querySelector('.lawn-close');
const prev = modal.querySelector('.lawn-prev');
const next = modal.querySelector('.lawn-next');
const counter = modal.querySelector('.lawn-counter');
const openGallery = document.getElementById('openGallery');
const morePhotosBtn = openGallery.querySelector('.more-photos-btn');

const includedImages = [
{ src: 'https://images.robotworld.cz/28400/foto_28424.jpg' },
{ src: 'https://images.robotworld.cz/28400/foto_28422.jpg' },
{ src: 'https://images.robotworld.cz/28400/foto_28415.jpg' },
{ src: 'https://images.robotworld.cz/28400/foto_28414.jpg' },
{ src: 'https://images.robotworld.cz/28400/foto_28416.jpg' },
{ src: 'https://images.robotworld.cz/28400/foto_28417.jpg' },
{ src: 'https://images.robotworld.cz/28400/foto_28419.jpg' },
{ src: 'https://images.robotworld.cz/28400/foto_28420.jpg' },
{ src: 'https://images.robotworld.cz/28400/foto_28421.jpg' },
{ src: 'https://images.robotworld.cz/19900/foto_19952.jpg' },
{ src: 'https://images.robotworld.cz/19900/foto_19953.jpg' },
{ src: 'https://images.robotworld.cz/28400/foto_28425.jpg' },
{ src: 'https://images.robotworld.cz/19900/foto_19964.jpg' }
];

let currentIndex = 0;

function showImage(index) {
currentIndex = index;
modalImg.src = includedImages[currentIndex].src;
modalImg.alt = '';
counter.textContent = `${currentIndex + 1} / ${includedImages.length}`;
}

function openModal(index) {
modal.classList.add('active');
showImage(index);
}

openGallery.addEventListener('click', (e) => {
if (e.target !== morePhotosBtn) {
openModal(0);
}
});

morePhotosBtn.addEventListener('click', (e) => {
e.stopPropagation();
openModal(0);
});

function closeModal() {
modal.classList.remove('active');
}

close.addEventListener('click', closeModal);

modal.addEventListener('click', (e) => {
if (e.target !== modalImg) {
closeModal();
}
});

prev.addEventListener('click', (e) => {
e.stopPropagation();
showImage((currentIndex - 1 + includedImages.length) % includedImages.length);
});

next.addEventListener('click', (e) => {
e.stopPropagation();
showImage((currentIndex + 1) % includedImages.length);
});

document.addEventListener('keydown', (e) => {
if (modal.classList.contains('active')) {
if (e.key === 'ArrowLeft') prev.click();
else if (e.key === 'ArrowRight') next.click();
else if (e.key === 'Escape') closeModal();
}
});

document.querySelectorAll('img').forEach((img) => {
if (includedImages.some(item => item.src === img.src)) {
img.classList.add('clickable-image');
img.addEventListener('click', () => {
const index = includedImages.findIndex(item => item.src === img.src);
openModal(index);
});
}
});

morePhotosBtn.textContent = `Více fotek (${includedImages.length - 1})`;
});
Zobrazit více

Parametry

Výrobce Pawbby