document.addEventListener("DOMContentLoaded", function (){
let globalModal=null;
let globalModalImg=null;
let globalCaptionDiv=null;
let globalThumbs=null;
let globalCurrentIndex=0;
let globalImageList=[];
document.addEventListener('keydown', handleKeydown);
function handleKeydown(e){
if(!globalModal||globalModal.style.display!=='flex') return;
if(e.key==='Escape'){
globalModal.style.display='none';
window.hasLightboxKeyListener=false;
}else if(e.key==='ArrowLeft'){
showImage(globalCurrentIndex - 1);
}else if(e.key==='ArrowRight'){
showImage(globalCurrentIndex + 1);
}}
function showImage(newIndex){
if(newIndex < 0) newIndex=globalImageList.length - 1;
if(newIndex >=globalImageList.length) newIndex=0;
globalCurrentIndex=newIndex;
globalModalImg.src=globalImageList[globalCurrentIndex].full;
globalCaptionDiv.innerHTML=globalImageList[globalCurrentIndex].caption||'';
globalThumbs.querySelectorAll('img').forEach((thumb, i)=> {
thumb.classList.toggle('active', i===globalCurrentIndex);
});
}
function openModal(index, imageList){
globalCurrentIndex=index;
globalImageList=imageList;
if(!globalModal){
globalModal=document.createElement('div');
globalModal.className='custom-lightbox';
globalModal.innerHTML=`
×
`;
document.body.appendChild(globalModal);
globalModalImg=globalModal.querySelector('#lightbox-img');
globalCaptionDiv=globalModal.querySelector('#lightbox-caption');
globalThumbs=globalModal.querySelector('.lightbox-thumbnails');
globalModal.querySelector('.close').addEventListener('click', ()=> {
globalModal.style.display='none';
});
globalModal.querySelector('.prev').addEventListener('click', ()=> {
showImage(globalCurrentIndex - 1);
});
globalModal.querySelector('.next').addEventListener('click', ()=> {
showImage(globalCurrentIndex + 1);
});
}
globalModal.style.display='flex';
if(!window.hasLightboxKeyListener){
}
showImage(index);
globalThumbs.innerHTML='';
imageList.forEach((img, i)=> {
const li=document.createElement('li');
const figure=document.createElement('figure');
const thumb=document.createElement('img');
thumb.src=img.thumb;
if(i===index) thumb.classList.add('active');
thumb.addEventListener('click', ()=> openModal(i, imageList));
figure.appendChild(thumb);
li.appendChild(figure);
globalThumbs.appendChild(li);
});
}
const galleries=document.querySelectorAll('.gallery, .wp-block-gallery');
const fullscreenBtnTemplate=document.createElement('button');
fullscreenBtnTemplate.innerHTML='';
fullscreenBtnTemplate.classList.add('lightbox-fullscreen-btn');
galleries.forEach((gallery)=> {
const imgs=gallery.querySelectorAll('a, figure a, figure');
if(imgs.length===0) return;
const imageList=[];
const addedSrcs=new Set();
imgs.forEach((el)=> {
const img=el.querySelector('img');
if(img){
let baseSrc=img.src.split('?')[0];
const anchor=el.tagName==='A' ? el:el.querySelector('a');
if(anchor&&anchor.href){
baseSrc=anchor.href.split('?')[0];
}
if(!addedSrcs.has(baseSrc)){
let caption='';
const fig=el.closest('figure');
if(fig){
const figcaption=fig.querySelector('figcaption');
if(figcaption) caption=figcaption.innerHTML;
}else if(img.alt){
caption=img.alt;
}
imageList.push({ full: baseSrc, thumb: img.src, caption });
addedSrcs.add(baseSrc);
}
img.addEventListener('click', (e)=> {
e.preventDefault();
const index=imageList.findIndex(item=> item.thumb===img.src);
if(index!==-1){
openModal(index, imageList);
}});
}});
if(imageList.length===0) return;
if(gallery.classList.contains('galeria-embutida')){
gallery.innerHTML='';
const mainImg=document.createElement('img');
mainImg.src=imageList[0].full;
mainImg.classList.add('lightbox-main');
const captionDiv=document.createElement('div');
captionDiv.classList.add('lightbox-caption-embutida');
const captionText=imageList[0].caption||'';
if(captionText.trim()===''){
captionDiv.classList.add('caption-vazio');
}else{
captionDiv.classList.remove('caption-vazio');
}
captionDiv.innerHTML=`${captionText}`;
const prev=document.createElement('div');
prev.classList.add('lightbox-arrow', 'left');
prev.innerHTML=`
`;
const next=document.createElement('div');
next.classList.add('lightbox-arrow', 'right');
next.innerHTML=`
`;
const thumbsContainer=document.createElement('ul');
thumbsContainer.classList.add('lightbox-thumbnails');
let currentIndex=0;
function updateMainImage(index){
currentIndex=index;
mainImg.src=imageList[index].full;
const captionText=imageList[index].caption||'';
captionDiv.innerHTML=`${captionText}`;
if(captionText.trim()===''){
captionDiv.classList.add('caption-vazio');
}else{
captionDiv.classList.remove('caption-vazio');
}
thumbsContainer.querySelectorAll('img').forEach((thumb, i)=> {
thumb.classList.toggle('active', i===index);
});
}
imageList.forEach((img, i)=> {
const li=document.createElement('li');
const figure=document.createElement('figure');
const thumb=document.createElement('img');
thumb.src=img.thumb;
if(i===0) thumb.classList.add('active');
thumb.addEventListener('click', ()=> updateMainImage(i));
figure.appendChild(thumb);
li.appendChild(figure);
thumbsContainer.appendChild(li);
});
prev.addEventListener('click', ()=> {
const newIndex=(currentIndex - 1 + imageList.length) % imageList.length;
updateMainImage(newIndex);
});
next.addEventListener('click', ()=> {
const newIndex=(currentIndex + 1) % imageList.length;
updateMainImage(newIndex);
});
const fsBtn=fullscreenBtnTemplate.cloneNode(true);
fsBtn.addEventListener('click', ()=> openModal(currentIndex, imageList));
gallery.appendChild(prev);
gallery.appendChild(mainImg);
gallery.appendChild(captionDiv);
gallery.appendChild(next);
gallery.appendChild(thumbsContainer);
gallery.appendChild(fsBtn);
}
else if(gallery.classList.contains('galeria-lightbox')){
imgs.forEach((el, i)=> {
const anchor=el.tagName==='A' ? el:el.querySelector('a');
const clickable=anchor||el;
const baseSrc=anchor?.href?.split('?')[0]||el?.src?.split('?')[0];
const imgIndex=imageList.findIndex((item)=> item.full===baseSrc);
if(clickable&&imgIndex >=0){
clickable.addEventListener('click', (e)=> {
e.preventDefault?.();
openModal(imgIndex, imageList);
});
}});
}});
});