From b02ccf73cf0ad8d6608e963bac9db0eacd39c378 Mon Sep 17 00:00:00 2001 From: Daniel Morrisey <142274379+therealfuntimeswithdanny@users.noreply.github.com> Date: Wed, 28 Jan 2026 13:13:27 -0500 Subject: [PATCH] added photos page --- index.html | 2 +- js/photos.js | 150 ++++++++++++++++++++++++++++++++++++++++ photos.html | 192 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 343 insertions(+), 1 deletion(-) create mode 100644 js/photos.js create mode 100644 photos.html diff --git a/index.html b/index.html index 6d7fac2..0513c68 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@
Calculating total visits...
-

Sign the Guestbook ~ Recently played Music ~ About Me

+

Guestbook ~ Recently played Music ~ About Me ~ Microblog ~ Photos

I like to listen to Music (Mainly Tate McRae and Taylor Swift), and post on Bluesky
I'm also on Threads and Mastodon, but active on Bluesky, becuase it's the best social media platform

diff --git a/js/photos.js b/js/photos.js new file mode 100644 index 0000000..a84d75a --- /dev/null +++ b/js/photos.js @@ -0,0 +1,150 @@ +// Photos Gallery Manager +const PHOTOS = [ + // Add your photos here in this format: + // { + // src: '/path/to/image.jpg', + // title: 'Photo Title', + // date: '2024-01-15' + // } + { + src: 'https://cloudflareisawesome.madebydanny.uk/photos-upload-1/20240622_235041500_iOS.jpg', + title: 'DSC_3811.jpg', + date: '2025-10-14' + }, + { + src: 'https://cloudflareisawesome.madebydanny.uk/photos-upload-1/DSC_3773.jpg', + title: 'DSC_3773.jpg', + date: '2025-10-14' + }, + { + src: 'https://cloudflareisawesome.madebydanny.uk/photos-upload-1/DSC_3766.jpg', + title: 'DSC_3766.jpg', + date: '2025-10-14' + }, + { + src: 'https://cloudflareisawesome.madebydanny.uk/photos-upload-1/DSC_3765.jpg', + title: 'DSC_3765.jpg', + date: '2025-10-14' + }, + { + src: 'https://cloudflareisawesome.madebydanny.uk/photos-upload-1/DSC_3704.jpg', + title: 'DSC_3704.jpg', + date: '2025-10-14' + }, + { + src: `https://cloudflareisawesome.madebydanny.uk/photos-upload-1/DSC_3692.jpg`, + title: 'DSC_3692.jpg', + date: '2025-10-14' + }, + { + src: 'https://cloudflareisawesome.madebydanny.uk/photos-upload-1/20240622_234015800_iOS.jpg', + title: 'DSC_3683.jpg', + date: '2025-10-14' + } +]; + +function renderPhotosGallery() { + const gallery = document.getElementById('photos-gallery'); + const emptyState = document.getElementById('empty-photos'); + + if (!gallery) return; + + gallery.innerHTML = ''; + + if (PHOTOS.length === 0) { + emptyState.style.display = 'block'; + return; + } + + emptyState.style.display = 'none'; + + PHOTOS.forEach((photo, index) => { + const photoItem = document.createElement('div'); + photoItem.className = 'photo-item'; + photoItem.role = 'button'; + photoItem.tabIndex = 0; + photoItem.setAttribute('aria-label', `View photo: ${photo.title}`); + + const img = document.createElement('img'); + img.src = photo.src; + img.alt = photo.title; + img.loading = 'lazy'; + + const info = document.createElement('div'); + info.className = 'photo-info'; + + const title = document.createElement('h3'); + title.className = 'photo-title'; + title.textContent = photo.title; + + const date = document.createElement('p'); + date.className = 'photo-date'; + date.textContent = new Date(photo.date).toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric' + }); + + info.appendChild(title); + info.appendChild(date); + photoItem.appendChild(img); + photoItem.appendChild(info); + + photoItem.addEventListener('click', () => openPhotoModal(photo.src, photo.title)); + photoItem.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + openPhotoModal(photo.src, photo.title); + } + }); + + gallery.appendChild(photoItem); + }); +} + +function openPhotoModal(src, alt) { + const modal = document.getElementById('photo-modal'); + const modalImg = document.getElementById('modal-photo'); + + if (modal && modalImg) { + modalImg.src = src; + modalImg.alt = alt; + modal.classList.add('active'); + document.body.style.overflow = 'hidden'; + } +} + +function closePhotoModal() { + const modal = document.getElementById('photo-modal'); + if (modal) { + modal.classList.remove('active'); + document.body.style.overflow = 'auto'; + } +} + +// Initialize on page load +document.addEventListener('DOMContentLoaded', () => { + renderPhotosGallery(); + + // Modal close button + const closeBtn = document.getElementById('modal-close'); + if (closeBtn) { + closeBtn.addEventListener('click', closePhotoModal); + } + + // Close modal when clicking outside image + const modal = document.getElementById('photo-modal'); + if (modal) { + modal.addEventListener('click', (e) => { + if (e.target === modal) { + closePhotoModal(); + } + }); + + // Close on Escape key + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + closePhotoModal(); + } + }); + } +}); diff --git a/photos.html b/photos.html new file mode 100644 index 0000000..6428712 --- /dev/null +++ b/photos.html @@ -0,0 +1,192 @@ + + + + + + Photos · madebydanny.uk + + + + + + + + + + + + +
+

Photos

+
+ + + + + + +
+
+ + +
+
+ +
+

Social Links:

+ +
+ + + + + + -- 2.51.2