Swiper o GLightbox no cargados.');
return;
}
// ── Thumbs Swiper ────────────────────────────────────────
const swiperThumbs = new Swiper('#' + ID_THUMBS, {
spaceBetween: 5,
slidesPerView: 'auto',
freeMode: true,
watchSlidesProgress: true,
slideToClickedSlide: true,
});
// ── Principal Swiper ─────────────────────────────────────
const swiperMain = new Swiper('#' + ID_MAIN, {
spaceBetween: 0,
loop: TOTAL > 1,
navigation: {
prevEl: '#' + ID_MAIN + ' .swiper-button-prev',
nextEl: '#' + ID_MAIN + ' .swiper-button-next',
},
pagination: {
el: '#' + ID_MAIN + ' .swiper-pagination',
clickable: true,
},
thumbs: { swiper: swiperThumbs },
keyboard: { enabled: true },
a11y: { enabled: true },
on: {
slideChange() {
const real = (this.realIndex !== undefined) ? this.realIndex : this.activeIndex;
const el = document.getElementById(ID_COUNT);
if (el) el.textContent = (real + 1) + ' / ' + TOTAL;
}
}
});
// ── GLightbox ────────────────────────────────────────────
const lightbox = GLightbox({
elements: IMGS.map(img => ({
href: img.full,
type: 'image',
description: img.alt || '',
})),
touchNavigation: true,
loop: true,
autoplayVideos: false,
});
// Obtener índice real (sin loop duplicates)
function realIndex() {
return (swiperMain.realIndex !== undefined)
? swiperMain.realIndex
: swiperMain.activeIndex;
}
// Botón fullscreen → abrir en imagen activa
document.getElementById(ID_FS).addEventListener('click', () => {
lightbox.openAt(realIndex());
});
// Clic en imagen → abrir fullscreen
document.querySelectorAll('#' + ID_MAIN + ' .swiper-slide img').forEach(img => {
img.addEventListener('click', () => lightbox.openAt(realIndex()));
});
// Navegar en lightbox → sincronizar Swiper
lightbox.on('slide_changed', ({ current }) => {
if (current && current.index !== undefined) {
swiperMain.slideToLoop
? swiperMain.slideToLoop(current.index)
: swiperMain.slideTo(current.index);
}
});
}
// Arrancar cuando el DOM esté listo
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
