let's show all the pics in the lightbox
This commit is contained in:
sakrecoer
parent
d0aeff8488
commit
18abdfb9e8
1 changed files with 78 additions and 67 deletions
|
|
@ -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 ? `<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 >= 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 ? `<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
|
||||
let selected;
|
||||
// Sort or shuffle
|
||||
let sortedPictures;
|
||||
if (randomize) {
|
||||
const shuffled = shuffleArray(allPictures);
|
||||
selected = shuffled.slice(0, 6);
|
||||
sortedPictures = shuffleArray(allPictures);
|
||||
} else {
|
||||
const sorted = [...allPictures].sort((a, b) => b.created_at - a.created_at);
|
||||
selected = sorted.slice(0, 6);
|
||||
sortedPictures = [...allPictures].sort((a, b) => b.created_at - a.created_at);
|
||||
}
|
||||
|
||||
// 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');
|
||||
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>
|
||||
`;
|
||||
|
||||
const item = createPictureElement(picture);
|
||||
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();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue