新增图库

2026-10-10 23:30:01 +08:00 · 2026-05-07 15:26:46 +08:00
parent b512ad83a7
commit a1b8cbd738
7 changed files with 506 additions and 3 deletions
@@ -0,0 +1,102 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const lightbox = document.getElementById('lightbox');
+    const lightboxImg = document.getElementById('lightbox-img');
+    const lightboxClose = document.getElementById('lightbox-close');
+    const lightboxPrev = document.getElementById('lightbox-prev');
+    const lightboxNext = document.getElementById('lightbox-next');
+    const lightboxCounter = document.getElementById('lightbox-counter');
+    const lightboxBackdrop = document.getElementById('lightbox-backdrop');
+
+    const cards = Array.from(document.querySelectorAll('.gallery-card'));
+    let currentIndex = -1;
+
+    function openLightbox(index) {
+        if (index < 0 || index >= cards.length) return;
+        currentIndex = index;
+        const src = cards[index].dataset.src;
+        if (!src) return;
+        lightboxImg.src = src;
+        lightbox.classList.add('active');
+        document.body.style.overflow = 'hidden';
+        updateCounter();
+    }
+
+    function closeLightbox() {
+        lightbox.classList.remove('active');
+        document.body.style.overflow = '';
+        currentIndex = -1;
+    }
+
+    function showPrev() {
+        if (currentIndex > 0) {
+            openLightbox(currentIndex - 1);
+        }
+    }
+
+    function showNext() {
+        if (currentIndex < cards.length - 1) {
+            openLightbox(currentIndex + 1);
+        }
+    }
+
+    function updateCounter() {
+        if (lightboxCounter) {
+            lightboxCounter.textContent = (currentIndex + 1) + ' / ' + cards.length;
+        }
+    }
+
+    // Click on gallery cards
+    cards.forEach(function (card, index) {
+        card.addEventListener('click', function () {
+            openLightbox(index);
+        });
+    });
+
+    // Lightbox controls
+    lightboxClose.addEventListener('click', closeLightbox);
+    lightboxBackdrop.addEventListener('click', closeLightbox);
+    lightboxPrev.addEventListener('click', function (e) {
+        e.stopPropagation();
+        showPrev();
+    });
+    lightboxNext.addEventListener('click', function (e) {
+        e.stopPropagation();
+        showNext();
+    });
+
+    // Keyboard navigation
+    document.addEventListener('keydown', function (e) {
+        if (!lightbox.classList.contains('active')) return;
+        switch (e.key) {
+            case 'Escape':
+                closeLightbox();
+                break;
+            case 'ArrowLeft':
+                showPrev();
+                break;
+            case 'ArrowRight':
+                showNext();
+                break;
+        }
+    });
+
+    // Touch swipe support
+    var touchStartX = 0;
+    var touchEndX = 0;
+
+    lightbox.addEventListener('touchstart', function (e) {
+        touchStartX = e.changedTouches[0].screenX;
+    }, { passive: true });
+
+    lightbox.addEventListener('touchend', function (e) {
+        touchEndX = e.changedTouches[0].screenX;
+        var diff = touchStartX - touchEndX;
+        if (Math.abs(diff) > 50) {
+            if (diff > 0) {
+                showNext();
+            } else {
+                showPrev();
+            }
+        }
+    }, { passive: true });
+});