ClickOnPostV1

script.js

@@ -91,8 +91,64 @@ document.addEventListener('DOMContentLoaded', () => {
     const navPostBtn = document.querySelector('.nav-btn:nth-child(2)');
     const navHomeBtn = document.querySelector('.nav-btn:first-child');
 
+    // Lightbox Elements
+    const lightboxView = document.getElementById('lightbox-view');
+    const lightboxClose = document.getElementById('lightbox-close');
+    const lightboxCarousel = document.querySelector('.lightbox-carousel');
+    // We check for counter inside helper, as it might be common class
+
     let isLoginMode = true;
 
+    // --- LIGHTBOX LOGIC ---
+    function openLightbox(media, startIndex) {
+        if (!lightboxView || !lightboxCarousel) return;
+
+        lightboxCarousel.innerHTML = '';
+        media.forEach((item) => {
+            const slide = document.createElement('div');
+            slide.className = 'lightbox-slide';
+            if (item.type === 'video') {
+                slide.innerHTML = `<video src="${item.src}" controls playsinline></video>`;
+            } else {
+                slide.innerHTML = `<img src="${item.src}">`;
+            }
+            lightboxCarousel.appendChild(slide);
+        });
+
+        lightboxView.classList.remove('hidden');
+        lightboxView.classList.add('fade-in');
+
+        // Scroll to index
+        const width = window.innerWidth;
+        // Need brief timeout for layout to stabilise
+        setTimeout(() => {
+            lightboxCarousel.scrollLeft = width * startIndex;
+        }, 10);
+
+        const lightboxCounter = lightboxView.querySelector('.media-counter');
+        if (lightboxCounter) {
+            lightboxCounter.innerText = `${startIndex + 1}/${media.length}`;
+            lightboxCounter.style.display = media.length > 1 ? 'block' : 'none';
+        }
+
+        // Attach Interactions
+        enableDragScroll(lightboxCarousel);
+        lightboxCarousel.onscroll = () => {
+            const index = Math.round(lightboxCarousel.scrollLeft / window.innerWidth);
+            if (lightboxCounter) lightboxCounter.innerText = `${index + 1}/${media.length}`;
+        };
+
+        document.body.style.overflow = 'hidden';
+    }
+
+    if (lightboxClose) {
+        lightboxClose.addEventListener('click', () => {
+            if (lightboxView) lightboxView.classList.add('hidden');
+            if (lightboxCarousel) lightboxCarousel.innerHTML = '';
+            document.body.style.overflow = '';
+        });
+    }
+
     // --- AUTH LOGIC ---
     if (toggleLink) {
         toggleLink.addEventListener('click', (e) => {
@@ -214,7 +270,7 @@ document.addEventListener('DOMContentLoaded', () => {
         for (const post of postsToRender) {
             if (!isPostDeleted(post.id) && !document.querySelector(`[data-post-id="${post.id}"]`)) {
                 let mediaItems = post.media;
-                // Backwards Compatibility
+                // Backwards Compatibility implementation
                 if (!mediaItems && post.imageSrc) {
                     mediaItems = [{ type: 'image', src: post.imageSrc }];
                 }
@@ -293,12 +349,12 @@ document.addEventListener('DOMContentLoaded', () => {
             media.forEach((item, index) => {
                 if (item.type === 'video') {
                     slidesHTML += `
-                        <div class="media-slide">
+                        <div class="media-slide" data-index="${index}">
                             <video src="${item.src}" controls playsinline loop></video>
                         </div>`;
                 } else {
                     slidesHTML += `
-                        <div class="media-slide">
+                        <div class="media-slide" data-index="${index}">
                             <img src="${item.src}" alt="Post Media ${index + 1}">
                         </div>`;
                 }
@@ -353,10 +409,19 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         else feedContainer.appendChild(article);
 
-        // Attach Drag-to-Scroll for Desktop
-        if (media.length > 1) {
-            const carousel = article.querySelector('.media-carousel');
-            if (carousel) enableDragScroll(carousel);
+        // Attach Drag-to-Scroll & Lightbox Click
+        const carousel = article.querySelector('.media-carousel');
+        if (carousel) {
+            if (media.length > 1) enableDragScroll(carousel);
+
+            // Open Lightbox on Click
+            carousel.addEventListener('click', (e) => {
+                const slide = e.target.closest('.media-slide');
+                if (slide && !e.target.tagName.match(/VIDEO|BUTTON/)) {
+                    const index = parseInt(slide.getAttribute('data-index') || '0');
+                    openLightbox(media, index);
+                }
+            });
         }
     }