66 lines
2.9 KiB
JavaScript
66 lines
2.9 KiB
JavaScript
let indiceMisterio = 0;
|
|
let misteriosHoy = null;
|
|
|
|
const MISTERIOS_DATA = {
|
|
0: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] },
|
|
1: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] },
|
|
2: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] },
|
|
3: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] },
|
|
4: { nombre: "Luminosos", titulos: ["El Bautismo", "Las Bodas de Caná", "El Anuncio del Reino", "La Transfiguración", "La Institución de la Eucaristía"] },
|
|
5: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] },
|
|
6: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] }
|
|
};
|
|
|
|
|
|
function inicializarRosario() {
|
|
const hoy = new Date();
|
|
misteriosHoy = MISTERIOS_DATA[hoy.getDay()];
|
|
|
|
|
|
const nombreMistElem = document.getElementById('nombre_misterio');
|
|
if (nombreMistElem) nombreMistElem.textContent = `Misterios ${misteriosHoy.nombre}`;
|
|
|
|
actualizarVistaMisterio();
|
|
|
|
// Eventos de los botones con comprobación de existencia (buena práctica)
|
|
const btnSiguiente = document.getElementById('siguiente');
|
|
const btnAnterior = document.getElementById('anterior');
|
|
|
|
if (btnSiguiente) {
|
|
btnSiguiente.addEventListener('click', () => {
|
|
indiceMisterio = (indiceMisterio + 1) % 5;
|
|
actualizarVistaMisterio();
|
|
});
|
|
}
|
|
|
|
if (btnAnterior) {
|
|
btnAnterior.addEventListener('click', () => {
|
|
indiceMisterio = (indiceMisterio - 1 + 5) % 5;
|
|
actualizarVistaMisterio();
|
|
});
|
|
}
|
|
}
|
|
|
|
function actualizarVistaMisterio() {
|
|
const titulo = document.getElementById('titulo_misterio');
|
|
const imagen = document.getElementById('imagen-misterio');
|
|
const paso = document.getElementById('paso-actual');
|
|
|
|
if (titulo) {
|
|
titulo.textContent = `${indiceMisterio + 1}º Misterio: ${misteriosHoy.titulos[indiceMisterio]}`;
|
|
}
|
|
|
|
if (paso) paso.textContent = indiceMisterio + 1;
|
|
|
|
if (imagen) {
|
|
const carpeta = misteriosHoy.nombre.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
|
|
// Asegúrate de que las fotos sean jpg y sigan este patrón: gozosos1.jpg, gozosos2.jpg...
|
|
imagen.src = `img/${carpeta}${indiceMisterio + 1}.jpg`;
|
|
|
|
// Animación suave
|
|
imagen.style.opacity = 0;
|
|
setTimeout(() => { imagen.style.opacity = 1; }, 50);
|
|
}
|
|
}
|
|
|
|
window.addEventListener('load', inicializarRosario); |