63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
import './etl.scss';
|
|
|
|
console.log('ETL Mobile Loaded');
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const modal = document.getElementById('lightbox-modal');
|
|
if (!modal) return;
|
|
|
|
const img = document.getElementById('lightbox-img');
|
|
const video = document.getElementById('lightbox-video');
|
|
const closeBtn = document.getElementById('lightbox-close');
|
|
const triggers = document.querySelectorAll('.lightbox-trigger');
|
|
|
|
function openModal(src, type) {
|
|
if (type === 'photo') {
|
|
img.src = src;
|
|
img.classList.remove('hidden');
|
|
video.classList.add('hidden');
|
|
video.pause();
|
|
} else {
|
|
video.src = src;
|
|
video.classList.remove('hidden');
|
|
img.classList.add('hidden');
|
|
video.play(); // Auto-play video
|
|
}
|
|
|
|
modal.classList.remove('hidden');
|
|
// Small timeout to allow transition
|
|
setTimeout(() => {
|
|
modal.classList.remove('opacity-0', 'pointer-events-none');
|
|
}, 10);
|
|
}
|
|
|
|
function closeModal() {
|
|
modal.classList.add('opacity-0', 'pointer-events-none');
|
|
setTimeout(() => {
|
|
modal.classList.add('hidden');
|
|
video.pause();
|
|
video.src = ""; // Stop buffering
|
|
img.src = "";
|
|
}, 300);
|
|
}
|
|
|
|
triggers.forEach(trigger => {
|
|
trigger.addEventListener('click', (e) => {
|
|
e.preventDefault(); // Prevent default link behavior if any
|
|
const src = trigger.dataset.src;
|
|
const type = trigger.dataset.type;
|
|
if (src && type) {
|
|
openModal(src, type);
|
|
}
|
|
});
|
|
});
|
|
|
|
closeBtn.addEventListener('click', closeModal);
|
|
|
|
// Close on background click
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) {
|
|
closeModal();
|
|
}
|
|
});
|
|
}); |