diff --git a/themes/one-pager/assets/js/scripts.js b/themes/one-pager/assets/js/scripts.js
index c4f6c7c..37cbdcf 100644
--- a/themes/one-pager/assets/js/scripts.js
+++ b/themes/one-pager/assets/js/scripts.js
@@ -31,30 +31,33 @@ function isAllowedArtist(artist) {
}
// ============================================
-// 2. CUSTOM LIGHTBOX
+// 2. CUSTOM LIGHTBOX (UPDATED)
// ============================================
-let currentPhotos = [];
-let currentIndex = 0;
+let allPicturesArray = [];
+let currentPhotoIndex = 0;
-// Build photo array from DOM
-function buildPhotoArray() {
- const photoItems = document.querySelectorAll('.photo-item');
- currentPhotos = [];
- photoItems.forEach(item => {
- const image = item.querySelector('img');
- const date = item.dataset.date || '';
- const pubkey = item.dataset.pubkey || '';
- const alt = item.dataset.alt || '';
- if (image) {
- currentPhotos.push({
- url: image.src,
- alt: alt || image.alt || '',
- date: date,
- pubkey: pubkey
- });
- }
+// Helper function to create a picture element
+function createPictureElement(picture) {
+ const item = document.createElement('div');
+ item.className = 'photo-item';
+ item.dataset.image = picture.url;
+ item.dataset.alt = picture.alt;
+ item.dataset.created = picture.created_at;
+ item.dataset.pubkey = picture.pubkey || '';
+
+ 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.innerHTML = `
+ ${picture.url ? `
` : ''}
+
📅 ${dateStr}
+ `;
+
+ 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 >= currentPhotos.length) index = 0;
- currentIndex = index;
+ if (index < 0) index = allPicturesArray.length - 1;
+ if (index >= allPicturesArray.length) index = 0;
+ currentPhotoIndex = index;
+
+ const photo = allPicturesArray[currentPhotoIndex];
- const photo = currentPhotos[currentIndex];
lightboxImage.src = photo.url;
lightboxImage.alt = photo.alt;
lightboxCaption.textContent = photo.alt;
- let metaText = '';
- if (photo.date) metaText += `📅 ${photo.date}`;
+ const date = new Date(photo.created_at * 1000);
+ 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 nextPhoto() { openLightbox(currentIndex + 1); }
+function prevPhoto() { openLightbox(currentPhotoIndex - 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 ? `${album}
` : ''}
${url ? `` : ''}
-
${genreTags.length > 0 ? `