docs: 2024.11.12 photo update

Hoya324 · Nov 11, 2024 · 02a2cd0 · 02a2cd0
1 parent 7f29ca4
commit 02a2cd0
Showing 1 changed file with 39 additions and 36 deletions.
diff --git a/assets/js/gallery.js b/assets/js/gallery.js
@@ -1,21 +1,21 @@
-// Throttle 함수 정의
-function throttle(func, delay) {
-    let lastCall = 0;
-    return function (...args) {
-        const now = new Date().getTime();
-        if (now - lastCall >= delay) {
-            lastCall = now;
-            return func(...args);
-        }
-    };
-}
-
 document.addEventListener("DOMContentLoaded", function () {
     const grid = document.querySelector(".gallery-grid");
     let currentPage = 1;
     const imagesPerPage = 10;
     let photos = [];
 
+    // Throttle 함수 정의
+    function throttle(func, delay) {
+        let lastCall = 0;
+        return function (...args) {
+            const now = new Date().getTime();
+            if (now - lastCall >= delay) {
+                lastCall = now;
+                return func(...args);
+            }
+        };
+    }
+
     async function fetchPhotos() {
         try {
             const response = await fetch(`./_data/photos.json`);
@@ -37,28 +37,46 @@ document.addEventListener("DOMContentLoaded", function () {
             img.src = `/assets/images/gallery/${photo.src}`;
             img.alt = photo.alt;
             img.loading = "lazy";
+            img.onclick = () => openLightbox(img.src); // openLightbox 호출 추가
             item.appendChild(img);
             grid.appendChild(item);
-
-            img.addEventListener('click', () => {
-                lightbox.classList.add('active');
-                const lightboxImg = document.createElement('img');
-                lightboxImg.src = img.src;
-                lightbox.innerHTML = '';
-                lightbox.appendChild(lightboxImg);
-            });
         });
 
         arrangeImages();
     }
 
+    // Lightbox 열기 함수 (window에 할당하여 전역 접근 가능하게 설정)
+    window.openLightbox = function (src) {
+        lightbox.classList.add('active');
+        const lightboxImg = document.createElement('img');
+        lightboxImg.src = src;
+        lightbox.innerHTML = '';
+        lightbox.appendChild(lightboxImg);
+    }
+
+    // Lightbox 닫기 함수
+    function closeLightbox() {
+        lightbox.classList.remove('active');
+    }
+
+    const lightbox = document.createElement('div');
+    lightbox.id = 'lightbox';
+    document.body.appendChild(lightbox);
+
+    lightbox.addEventListener('click', closeLightbox);
+    document.addEventListener('keydown', (event) => {
+        if (event.key === "Escape") {
+            closeLightbox();
+        }
+    });
+
     // Throttle을 적용한 스크롤 이벤트
     window.addEventListener("scroll", throttle(() => {
         if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
             currentPage++;
             loadImages(currentPage);
         }
-    }, 200)); // 200ms 간격으로 스크롤 이벤트 발생 제한
+    }, 200));
 
     function arrangeImages() {
         const items = document.querySelectorAll(".gallery-item img");
@@ -84,20 +102,5 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     }
 
-    const lightbox = document.createElement('div');
-    lightbox.id = 'lightbox';
-    document.body.appendChild(lightbox);
-
-    function closeLightbox() {
-        lightbox.classList.remove('active');
-    }
-
-    lightbox.addEventListener('click', closeLightbox);
-    document.addEventListener('keydown', (event) => {
-        if (event.key === "Escape") {
-            closeLightbox();
-        }
-    });
-
     fetchPhotos().then(() => loadImages(currentPage));
 });