let's show all the pics in the lightbox

themes/one-pager/assets/js/scripts.js

@@ -31,30 +31,33 @@ function isAllowedArtist(artist) {
 }
 
 // ============================================
-// 2. CUSTOM LIGHTBOX
+// 2. CUSTOM LIGHTBOX (UPDATED)
 // ============================================
 
-let currentPhotos = [];
+let allPicturesArray = [];
-let currentIndex = 0;
+let currentPhotoIndex = 0;
 
-// Build photo array from DOM
+// Helper function to create a picture element
-function buildPhotoArray() {
+function createPictureElement(picture) {
-  const photoItems = document.querySelectorAll('.photo-item');
+  const item = document.createElement('div');
-  currentPhotos = [];
+  item.className = 'photo-item';
-  photoItems.forEach(item => {
+  item.dataset.image = picture.url;
-    const image = item.querySelector('img');
+  item.dataset.alt = picture.alt;
-    const date = item.dataset.date || '';
+  item.dataset.created = picture.created_at;
-    const pubkey = item.dataset.pubkey || '';
+  item.dataset.pubkey = picture.pubkey || '';
-    const alt = item.dataset.alt || '';
+
-    if (image) {
+  const date = new Date(picture.created_at * 1000);
-      currentPhotos.push({
+  const dateStr = date.toLocaleDateString('en-US', {
-        url: image.src,
+    year: 'numeric', month: 'short', day: 'numeric'
-        alt: alt || image.alt || '',
-        date: date,
-        pubkey: pubkey
-      });
-    }
   });
+  item.dataset.date = dateStr;
+
+  item.innerHTML = `
+  ${picture.url ? `<img src="${picture.url}" alt="${picture.alt}" loading="lazy">` : ''}
+  <div class="photo-date"><span>📅 ${dateStr}</span></div>
+  `;
+
+  return item;
 }
 
 // Open lightbox
@@ -65,26 +68,48 @@ function openLightbox(index) {
   const lightboxMeta = document.getElementById('lightboxMeta');
   const lightboxCounter = document.getElementById('lightboxCounter');
 
-  if (!lightbox || !lightboxImage || currentPhotos.length === 0) return;
+  if (!lightbox || !lightboxImage || allPicturesArray.length === 0) return;
 
-  if (index < 0) index = currentPhotos.length - 1;
+  if (index < 0) index = allPicturesArray.length - 1;
-  if (index >= currentPhotos.length) index = 0;
+  if (index >= allPicturesArray.length) index = 0;
-  currentIndex = index;
+  currentPhotoIndex = index;
+
+  const photo = allPicturesArray[currentPhotoIndex];
 
-  const photo = currentPhotos[currentIndex];
   lightboxImage.src = photo.url;
   lightboxImage.alt = photo.alt;
   lightboxCaption.textContent = photo.alt;
 
-  let metaText = '';
+  const date = new Date(photo.created_at * 1000);
-  if (photo.date) metaText += `📅 ${photo.date}`;
+  const dateStr = date.toLocaleDateString('en-US', {
+    year: 'numeric', month: 'short', day: 'numeric'
+  });
 
-  lightboxMeta.textContent = metaText || '📅 No date available';
+  let metaText = `📅 ${dateStr}`;
 
-  lightboxCounter.textContent = `${currentIndex + 1} / ${currentPhotos.length}`;
+  lightboxMeta.textContent = metaText;
+
+  lightboxCounter.textContent = `${currentPhotoIndex + 1} / ${allPicturesArray.length}`;
 
   lightbox.classList.add('active');
   document.body.style.overflow = 'hidden';
+
+  // Preload next and previous images
+  preloadAdjacentImages(currentPhotoIndex);
+}
+
+function preloadAdjacentImages(index) {
+  const nextIndex = (index + 1) % allPicturesArray.length;
+  if (nextIndex !== index) {
+    const nextImg = new Image();
+    nextImg.src = allPicturesArray[nextIndex].url;
+  }
+
+  const prevIndex = (index - 1 + allPicturesArray.length) % allPicturesArray.length;
+  if (prevIndex !== index) {
+    const prevImg = new Image();
+    prevImg.src = allPicturesArray[prevIndex].url;
+  }
 }
 
 // Close lightbox
@@ -96,8 +121,8 @@ function closeLightbox() {
 }
 
 // Navigate
-function prevPhoto() { openLightbox(currentIndex - 1); }
+function prevPhoto() { openLightbox(currentPhotoIndex - 1); }
-function nextPhoto() { openLightbox(currentIndex + 1); }
+function nextPhoto() { openLightbox(currentPhotoIndex + 1); }
 
 // Initialize lightbox event listeners
 function initLightbox() {
@@ -108,14 +133,16 @@ function initLightbox() {
 
   if (!lightbox) return;
 
-  buildPhotoArray();
-
   // Photo click listeners
-  document.querySelectorAll('.photo-item img').forEach((img, index) => {
+  document.querySelectorAll('.photo-item img').forEach((img) => {
     img.removeEventListener('click', img._lightboxClick);
     img._lightboxClick = function(e) {
       e.preventDefault();
-      openLightbox(index);
+      const url = this.src;
+      const fullIndex = allPicturesArray.findIndex(p => p.url === url);
+      if (fullIndex !== -1) {
+        openLightbox(fullIndex);
+      }
     };
     img.addEventListener('click', img._lightboxClick);
   });
@@ -200,7 +227,6 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
         else if (key === 'image') image = value;
         else if (key === 'artist') artist = value;
         else if (key === 'album') album = value;
-        // ONLY collect tags with key 't' (genre tags)
         else if (key === 't') genreTags.push(value);
         else if (key === 'alt') alt = value;
       });
@@ -218,7 +244,6 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
     ${album ? `<p class="music-album">${album}</p>` : ''}
     </div>
     ${url ? `<audio controls preload="none"><source src="${url}" type="audio/mpeg">Your browser does not support the audio element.</audio>` : ''}
-
     ${genreTags.length > 0 ? `
       <div class="music-tags">
       ${genreTags.map(t => `<span class="tag"><span>${t}</span></span>`).join('')}
@@ -258,18 +283,17 @@ function handleLyricsToggle() {
 }
 
 // ============================================
-// 4. PICTURES RENDERER
+// 4. PICTURES RENDERER (UPDATED)
 // ============================================
 
 function renderRandomPictures(picturesData, containerId, randomize = false) {
   const container = document.getElementById(containerId);
   if (!container) return;
 
-  // First, flatten all pictures from all events
+  // Flatten all pictures from all events
   let allPictures = [];
 
   picturesData.forEach(event => {
-    // Check if this event has multiple imeta tags
     const imetaTags = [];
     event.tags.forEach(tag => {
       if (tag[0] === 'imeta') {
@@ -278,12 +302,10 @@ function renderRandomPictures(picturesData, containerId, randomize = false) {
     });
 
     if (imetaTags.length > 0) {
-      // Parse each imeta tag
       imetaTags.forEach(imetaTag => {
         let imageUrl = '';
         let alt = event.content || '';
 
-        // The imeta tag is an array of strings
         imetaTag.forEach(item => {
           if (typeof item === 'string') {
             if (item.startsWith('url ')) {
@@ -305,7 +327,6 @@ function renderRandomPictures(picturesData, containerId, randomize = false) {
         }
       });
     } else {
-      // Fallback: single image event (kind 20 with one imeta)
       let imageUrl = '';
       let alt = event.content || '';
 
@@ -330,39 +351,29 @@ function renderRandomPictures(picturesData, containerId, randomize = false) {
     }
   });
 
-  // Now select from all pictures
+  // Sort or shuffle
-  let selected;
+  let sortedPictures;
   if (randomize) {
-    const shuffled = shuffleArray(allPictures);
+    sortedPictures = shuffleArray(allPictures);
-    selected = shuffled.slice(0, 6);
   } else {
-    const sorted = [...allPictures].sort((a, b) => b.created_at - a.created_at);
+    sortedPictures = [...allPictures].sort((a, b) => b.created_at - a.created_at);
-    selected = sorted.slice(0, 6);
   }
 
+  // Store all pictures globally for the lightbox
+  allPicturesArray = sortedPictures;
+
+  // Show first 6, or all if less than 6
+  const initialCount = Math.min(6, sortedPictures.length);
+  const selected = sortedPictures.slice(0, initialCount);
+
   container.innerHTML = '';
 
   selected.forEach(picture => {
-    const item = document.createElement('div');
+    const item = createPictureElement(picture);
-    item.className = 'photo-item';
-    item.dataset.image = picture.url;
-    item.dataset.alt = picture.alt;
-
-    const date = new Date(picture.created_at * 1000);
-    const dateStr = date.toLocaleDateString('en-US', {
-      year: 'numeric', month: 'short', day: 'numeric'
-    });
-    item.dataset.date = dateStr;
-    item.dataset.pubkey = picture.pubkey || '';
-
-    item.innerHTML = `
-    ${picture.url ? `<img src="${picture.url}" alt="${picture.alt}" loading="lazy">` : ''}
-    <div class="photo-date"><span>📅 ${dateStr}</span></div>
-    `;
-
     container.appendChild(item);
   });
 
+  // Initialize lightbox
   initLightbox();
 }
 
@@ -509,7 +520,7 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   });
 
-  // Smooth scrolling for navigation links (both main nav and sticky nav)
+  // Smooth scrolling for navigation links
   document.querySelectorAll('nav a').forEach(link => {
     link.addEventListener('click', function(e) {
       e.preventDefault();