File size: 2,643 Bytes
2042651 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | // Mobile nav, contact form demo, gallery filters, and lightbox
document.addEventListener('DOMContentLoaded', () => {
const nav = document.getElementById('site-nav');
const toggle = document.getElementById('nav-toggle');
const year = document.getElementById('year');
const form = document.getElementById('contact-form');
const status = document.getElementById('form-status');
// Year
if(year) year.textContent = new Date().getFullYear();
// Mobile nav toggle
if(toggle && nav){
toggle.addEventListener('click', () => {
const expanded = nav.style.display === 'block';
nav.style.display = expanded ? '' : 'block';
toggle.setAttribute('aria-expanded', String(!expanded));
});
}
// Contact form (demo)
if(form){
form.addEventListener('submit', (e) => {
e.preventDefault();
const data = new FormData(form);
console.log('Contact form:', Object.fromEntries(data.entries()));
status.textContent = 'Thanks — your message was received (demo).';
form.reset();
});
}
// Gallery filter
const filterButtons = document.querySelectorAll('.filter-btn');
const items = document.querySelectorAll('.art-item');
function setActiveFilter(filter){
filterButtons.forEach(b => b.classList.toggle('active', b.dataset.filter === filter));
items.forEach(it => {
const cat = it.dataset.category;
it.style.display = (filter === 'all' || cat === filter) ? '' : 'none';
});
}
filterButtons.forEach(btn => {
btn.addEventListener('click', () => setActiveFilter(btn.dataset.filter));
});
// Lightbox
const lightbox = document.getElementById('lightbox');
const lbImg = document.getElementById('lightbox-img');
const lbCaption = document.getElementById('lightbox-caption');
const lbClose = document.getElementById('lightbox-close');
document.getElementById('gallery-grid').addEventListener('click', (e) => {
const fig = e.target.closest('figure.art-item');
if(!fig) return;
const img = fig.querySelector('img');
const caption = fig.querySelector('figcaption')?.textContent || '';
lbImg.src = img.src;
lbImg.alt = img.alt;
lbCaption.textContent = caption;
lightbox.style.display = 'flex';
lightbox.setAttribute('aria-hidden', 'false');
});
function closeLightbox(){
lightbox.style.display = 'none';
lightbox.setAttribute('aria-hidden', 'true');
lbImg.src = '';
}
lbClose.addEventListener('click', closeLightbox);
lightbox.addEventListener('click', (e) => {
if(e.target === lightbox) closeLightbox();
});
// Initialize with "all"
setActiveFilter('all');
}); |