.photo-lightbox-overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.92);
z-index: 999999;
justify-content: center;
align-items: center;
flex-direction: column;
opacity: 0;
transition: opacity .3s ease;
}
.photo-lightbox-overlay.active {
display: flex;
opacity: 1;
}
.photo-lightbox-overlay img {
max-width: 90vw;
max-height: 80vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.photo-lightbox-overlay .lb-close {
position: absolute;
top: 20px;
right: 30px;
font-size: 40px;
color: white;
background: none;
border: none;
cursor: pointer;
z-index: 10;
line-height: 1;
}
.photo-lightbox-overlay .lb-prev,
.photo-lightbox-overlay .lb-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
color: white;
background: rgba(255,255,255,.15);
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.photo-lightbox-overlay .lb-prev { left: 20px; }
.photo-lightbox-overlay .lb-next { right: 20px; }
.photo-lightbox-overlay .lb-counter {
color: #aaa;
font-size: .9rem;
margin-top: 15px;
}
.photo-lightbox-overlay .lb-caption {
color: white;
font-size: 1.1rem;
font-weight: 600;
text-align: center;
margin-top: 10px;
}
×
❮
❯
(function() {
var lightbox = document.getElementById(“photo-lightbox”);
var lbImg = document.getElementById(“lb-image”);
var lbCaption = document.getElementById(“lb-caption”);
var lbCounter = document.getElementById(“lb-counter”);
var currentIndex = 0;
var gallery = [];
var galleries = document.querySelectorAll(“.wp-block-gallery”);
galleries.forEach(function(galleryEl) {
var imgs = galleryEl.querySelectorAll(“img”);
imgs.forEach(function(img) {
var src = img.getAttribute(“src”);
var fullUrl = src.replace(/-d+xd+(.w+)$/, “$1”);
var fig = img.closest(“figure”);
var caption = “”;
if (fig) {
var figCap = fig.querySelector(“figcaption”);
if (figCap) caption = figCap.textContent.trim();
}
gallery.push({ src: src, url: fullUrl, caption: caption });
img.style.cursor = “pointer”;
img.addEventListener(“click”, function(e) {
e.preventDefault();
e.stopPropagation();
for (var i = 0; i < gallery.length; i++) {
if (gallery[i].src === this.getAttribute("src")) {
currentIndex = i;
break;
}
}
openLightbox(currentIndex);
});
});
});
function openLightbox(index) {
if (gallery.length === 0) return;
currentIndex = index;
var item = gallery[currentIndex];
lbImg.src = item.url;
lbCaption.textContent = item.caption;
lbCounter.textContent = (currentIndex + 1) + " of " + gallery.length;
lightbox.classList.add("active");
}
function showImage(index) {
if (index = gallery.length) index = 0;
currentIndex = index;
var item = gallery[currentIndex];
lbImg.src = item.url;
lbCaption.textContent = item.caption;
lbCounter.textContent = (currentIndex + 1) + ” of ” + gallery.length;
}
lightbox.querySelector(“.lb-close”).addEventListener(“click”, function() {
lightbox.classList.remove(“active”);
});
lightbox.querySelector(“.lb-prev”).addEventListener(“click”, function(e) {
e.stopPropagation();
showImage(currentIndex – 1);
});
lightbox.querySelector(“.lb-next”).addEventListener(“click”, function(e) {
e.stopPropagation();
showImage(currentIndex + 1);
});
document.addEventListener(“keydown”, function(e) {
if (!lightbox.classList.contains(“active”)) return;
if (e.key === “Escape”) lightbox.classList.remove(“active”);
if (e.key === “ArrowLeft”) showImage(currentIndex – 1);
if (e.key === “ArrowRight”) showImage(currentIndex + 1);
});
lightbox.addEventListener(“click”, function(e) {
if (e.target === lightbox) lightbox.classList.remove(“active”);
});
})();
