121 lines
3.8 KiB
JavaScript
121 lines
3.8 KiB
JavaScript
(function () {
|
|
// Configuración de idioma para LightGallery
|
|
const lang = document.documentElement.lang || "es";
|
|
const translations = {
|
|
es: {
|
|
zoom: "Zoom",
|
|
fullscreen: "Pantalla completa",
|
|
close: "Cerrar",
|
|
previous: "Anterior",
|
|
next: "Siguiente",
|
|
},
|
|
en: {
|
|
zoom: "Zoom",
|
|
fullscreen: "Fullscreen",
|
|
close: "Close",
|
|
previous: "Previous",
|
|
next: "Next",
|
|
},
|
|
};
|
|
|
|
const currentLang = translations[lang] || translations.es;
|
|
|
|
// Esperar a que cargue todo
|
|
function initGallery() {
|
|
var galleryItems = document.querySelectorAll(".gallery-item");
|
|
|
|
if (!galleryItems || galleryItems.length === 0) {
|
|
console.log("No hay elementos de galería");
|
|
return;
|
|
}
|
|
|
|
// Verificar que lightGallery existe
|
|
if (typeof lightGallery === "undefined") {
|
|
console.error("LightGallery no cargado, reintentando...");
|
|
setTimeout(initGallery, 500);
|
|
return;
|
|
}
|
|
|
|
// Configurar cada item
|
|
galleryItems.forEach(function (item, index) {
|
|
item.addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
|
|
// Construir array de imágenes
|
|
var items = [];
|
|
galleryItems.forEach(function (el) {
|
|
var src = el.getAttribute("data-src");
|
|
var title = "";
|
|
var titleEl = el.querySelector(".gallery-title");
|
|
if (titleEl) {
|
|
title = titleEl.textContent.trim();
|
|
}
|
|
|
|
items.push({
|
|
src: src,
|
|
thumb: src,
|
|
subHtml:
|
|
'<div style="text-align: center; padding: 1rem;">' +
|
|
'<h4 style="color: white; margin-bottom: 0.5rem;">' +
|
|
title +
|
|
"</h4>" +
|
|
"</div>",
|
|
});
|
|
});
|
|
|
|
// Inicializar galería
|
|
var gallery = lightGallery(items, {
|
|
speed: 500,
|
|
showMaximizeIcon: true,
|
|
showZoomIcon: true,
|
|
zoom: true,
|
|
fullscreen: true,
|
|
thumbnail: true,
|
|
counter: true,
|
|
loop: true,
|
|
escKey: true,
|
|
lang: currentLang,
|
|
zoomPluginStrings: {
|
|
zoomIn: currentLang.zoom,
|
|
zoomOut: currentLang.zoom,
|
|
},
|
|
fullscreenPluginStrings: {
|
|
fullscreen: currentLang.fullscreen,
|
|
},
|
|
closable: true,
|
|
download: false,
|
|
});
|
|
|
|
gallery.openGallery(index);
|
|
});
|
|
});
|
|
|
|
// Scroll Reveal
|
|
var observer = new IntersectionObserver(
|
|
function (entries) {
|
|
entries.forEach(function (entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add("revealed");
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{
|
|
threshold: 0.1,
|
|
rootMargin: "50px",
|
|
},
|
|
);
|
|
|
|
galleryItems.forEach(function (item) {
|
|
observer.observe(item);
|
|
});
|
|
}
|
|
|
|
// Iniciar cuando el DOM esté listo
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", initGallery);
|
|
} else {
|
|
initGallery();
|
|
}
|
|
})();
|