the home site for me: also iteration 3 or 4 of my site
dunkirk.sh
1let currentLightboxImages = [];
2let currentLightboxIndex = 0;
3
4function openLightbox(src) {
5 currentLightboxImages = [src];
6 currentLightboxIndex = 0;
7 showLightbox();
8}
9
10function openLightboxGroup(element) {
11 const group = element.closest('.img-group');
12 const images = Array.from(group.querySelectorAll('img')).map(img => img.src);
13 const clickedImg = element.querySelector('img');
14
15 currentLightboxImages = images;
16 currentLightboxIndex = images.indexOf(clickedImg.src);
17 showLightbox();
18}
19
20function showLightbox() {
21 let lightbox = document.getElementById('lightbox');
22
23 if (!lightbox) {
24 lightbox = document.createElement('div');
25 lightbox.id = 'lightbox';
26 lightbox.innerHTML = `
27 <div class="lightbox-content">
28 <button class="lightbox-close" onclick="closeLightbox()">×</button>
29 <img id="lightbox-img" src="" alt="">
30 <div class="lightbox-controls">
31 <button class="lightbox-prev" onclick="prevImage()">←</button>
32 <button class="lightbox-next" onclick="nextImage()">→</button>
33 </div>
34 </div>
35 `;
36 document.body.appendChild(lightbox);
37
38 lightbox.addEventListener('click', (e) => {
39 if (e.target === lightbox) closeLightbox();
40 });
41
42 document.addEventListener('keydown', handleKeyPress);
43 }
44
45 updateLightboxImage();
46 lightbox.style.display = 'flex';
47 document.body.style.overflow = 'hidden';
48}
49
50function closeLightbox() {
51 const lightbox = document.getElementById('lightbox');
52 if (lightbox) {
53 lightbox.style.display = 'none';
54 document.body.style.overflow = '';
55 }
56}
57
58function updateLightboxImage() {
59 const img = document.getElementById('lightbox-img');
60 const controls = document.querySelector('.lightbox-controls');
61
62 img.src = currentLightboxImages[currentLightboxIndex];
63
64 if (currentLightboxImages.length === 1) {
65 controls.style.display = 'none';
66 } else {
67 controls.style.display = 'flex';
68 }
69}
70
71function prevImage() {
72 currentLightboxIndex = (currentLightboxIndex - 1 + currentLightboxImages.length) % currentLightboxImages.length;
73 updateLightboxImage();
74}
75
76function nextImage() {
77 currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxImages.length;
78 updateLightboxImage();
79}
80
81function handleKeyPress(e) {
82 const lightbox = document.getElementById('lightbox');
83 if (!lightbox || lightbox.style.display !== 'flex') return;
84
85 if (e.key === 'Escape') {
86 closeLightbox();
87 } else if (e.key === 'ArrowLeft') {
88 prevImage();
89 } else if (e.key === 'ArrowRight') {
90 nextImage();
91 }
92}