33 lines
1.1 KiB
JavaScript
33 lines
1.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const zoomables = document.querySelectorAll('.zoomable img');
|
|
const modal = document.getElementById('zoomModal');
|
|
const zoomedImage = document.getElementById('zoomedImage');
|
|
const closeModal = document.getElementById('closeModal');
|
|
|
|
// Abrir el modal al hacer clic en una imagen
|
|
zoomables.forEach(img => {
|
|
img.addEventListener('click', () => {
|
|
zoomedImage.src = img.src; // Poner la imagen seleccionada en el modal
|
|
modal.classList.add('active'); // Mostrar el modal
|
|
});
|
|
});
|
|
|
|
// Cerrar el modal al hacer clic en el botón de cierre
|
|
closeModal.addEventListener('click', () => {
|
|
modal.classList.remove('active');
|
|
});
|
|
|
|
// Cerrar el modal al hacer clic fuera de la imagen
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) {
|
|
modal.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Cerrar el modal con la tecla Escape
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && modal.classList.contains('active')) {
|
|
modal.classList.remove('active');
|
|
}
|
|
});
|
|
}); |