68 lines
2.6 KiB
JavaScript
68 lines
2.6 KiB
JavaScript
// Mobiles Menü
|
|
const toggle = document.querySelector('.nav-toggle');
|
|
const menu = document.querySelector('.nav-menu');
|
|
if (toggle && menu) {
|
|
toggle.addEventListener('click', () => {
|
|
menu.classList.toggle('open');
|
|
});
|
|
// Schließen beim Klick auf einen Link
|
|
menu.querySelectorAll('a').forEach(a => {
|
|
a.addEventListener('click', () => menu.classList.remove('open'));
|
|
});
|
|
}
|
|
|
|
// Slide-Box (Bildkarussell)
|
|
document.querySelectorAll('.slider').forEach(slider => {
|
|
const track = slider.querySelector('.slider-track');
|
|
const prev = slider.querySelector('.slider-prev');
|
|
const next = slider.querySelector('.slider-next');
|
|
const step = () => {
|
|
const slide = track.querySelector('.slider-slide');
|
|
if (!slide) return slider.clientWidth * 0.8;
|
|
const gap = parseFloat(getComputedStyle(track).columnGap) || 0;
|
|
return slide.getBoundingClientRect().width + gap;
|
|
};
|
|
if (prev) prev.addEventListener('click', () => track.scrollBy({ left: -step(), behavior: 'smooth' }));
|
|
if (next) next.addEventListener('click', () => track.scrollBy({ left: step(), behavior: 'smooth' }));
|
|
});
|
|
|
|
// Lightbox für Bildergalerien (Ferienwohnungen)
|
|
const lightboxGallery = document.querySelector('.lightbox-gallery');
|
|
const lightbox = document.querySelector('.lightbox');
|
|
if (lightboxGallery && lightbox) {
|
|
const triggers = Array.from(lightboxGallery.querySelectorAll('.lightbox-trigger'));
|
|
const images = triggers.map(a => ({ src: a.href, alt: a.querySelector('img').alt }));
|
|
const imgEl = lightbox.querySelector('.lightbox-img');
|
|
const closeBtn = lightbox.querySelector('.lightbox-close');
|
|
const prevBtn = lightbox.querySelector('.lightbox-prev');
|
|
const nextBtn = lightbox.querySelector('.lightbox-next');
|
|
let current = 0;
|
|
|
|
const show = i => {
|
|
current = (i + images.length) % images.length;
|
|
imgEl.src = images[current].src;
|
|
imgEl.alt = images[current].alt;
|
|
};
|
|
const open = i => {
|
|
show(i);
|
|
lightbox.hidden = false;
|
|
document.body.style.overflow = 'hidden';
|
|
};
|
|
const close = () => {
|
|
lightbox.hidden = true;
|
|
document.body.style.overflow = '';
|
|
};
|
|
|
|
triggers.forEach((a, i) => a.addEventListener('click', e => { e.preventDefault(); open(i); }));
|
|
closeBtn.addEventListener('click', close);
|
|
prevBtn.addEventListener('click', () => show(current - 1));
|
|
nextBtn.addEventListener('click', () => show(current + 1));
|
|
lightbox.addEventListener('click', e => { if (e.target === lightbox) close(); });
|
|
document.addEventListener('keydown', e => {
|
|
if (lightbox.hidden) return;
|
|
if (e.key === 'Escape') close();
|
|
if (e.key === 'ArrowLeft') show(current - 1);
|
|
if (e.key === 'ArrowRight') show(current + 1);
|
|
});
|
|
}
|