Different filmstrip, zooming images

package-lock.json

@@ -56,6 +56,8 @@
 				"redis": "^4.7.0",
 				"sharp": "^0.34.2",
 				"steamapi": "^3.0.11",
+				"svelte-medium-image-zoom": "^0.2.6",
+				"svelte-portal": "^2.2.1",
 				"svelte-tiptap": "^2.1.0",
 				"svgo": "^3.3.2",
 				"tinyduration": "^3.3.1",
@@ -7832,6 +7834,19 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/svelte-medium-image-zoom": {
+			"version": "0.2.6",
+			"resolved": "https://registry.npmjs.org/svelte-medium-image-zoom/-/svelte-medium-image-zoom-0.2.6.tgz",
+			"integrity": "sha512-PJAm9R8IgzcMmUEdCmLMYtSU6Qtzr0nh5OTKrQi/RTOrcQ/tRb7w+AGVvVyFKaR40fD5cr8986EOxjBSdD3vfg==",
+			"peerDependencies": {
+				"svelte": "^5.0.0"
+			}
+		},
+		"node_modules/svelte-portal": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/svelte-portal/-/svelte-portal-2.2.1.tgz",
+			"integrity": "sha512-uF7is5sM4aq5iN7QF/67XLnTUvQCf2iiG/B1BHTqLwYVY1dsVmTeXZ/LeEyU6dLjApOQdbEG9lkqHzxiQtOLEQ=="
+		},
 		"node_modules/svelte-preprocess": {
 			"version": "5.1.4",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",

package.json

@@ -101,6 +101,8 @@
 		"redis": "^4.7.0",
 		"sharp": "^0.34.2",
 		"steamapi": "^3.0.11",
+		"svelte-medium-image-zoom": "^0.2.6",
+		"svelte-portal": "^2.2.1",
 		"svelte-tiptap": "^2.1.0",
 		"svgo": "^3.3.2",
 		"tinyduration": "^3.3.1",

src/routes/photos/p/[id]/+page.svelte

@@ -6,6 +6,8 @@
 	import { onMount } from 'svelte'
 	import type { PageData } from './$types'
 	import { isAlbum } from '$lib/types/photos'
+	import Zoom from 'svelte-medium-image-zoom'
+	import 'svelte-medium-image-zoom/dist/styles.css'
 
 	let { data }: { data: PageData } = $props()
 
@@ -13,8 +15,6 @@
 	const error = $derived(data.error)
 	const photoItems = $derived(data.photoItems || [])
 	const currentPhotoId = $derived(data.currentPhotoId)
-	
-	let showModal = $state(false)
 
 	const pageUrl = $derived($page.url.href)
 
@@ -69,77 +69,42 @@
 		photo?.exifData && typeof photo.exifData === 'object' ? photo.exifData : null
 	)
 
-	// Get adjacent photos for filmstrip - always show 5 when possible
+	// Get previous and next photos (excluding albums)
-	const filmstripItems = $derived(() => {
+	const adjacentPhotos = $derived(() => {
-		if (!photoItems.length || !currentPhotoId) return []
+		if (!photoItems.length || !currentPhotoId) return { prev: null, next: null }
 		
-		const currentIndex = photoItems.findIndex(item => item.id === currentPhotoId)
+		// Filter out albums - we only want photos
-		if (currentIndex === -1) return []
+		const photosOnly = photoItems.filter(item => !isAlbum(item))
+		const currentIndex = photosOnly.findIndex(item => item.id === currentPhotoId)
 		
-		const targetCount = 5
+		if (currentIndex === -1) return { prev: null, next: null }
-		const halfCount = Math.floor(targetCount / 2)
 		
-		let start = currentIndex - halfCount
+		return {
-		let end = currentIndex + halfCount + 1
+			prev: currentIndex > 0 ? photosOnly[currentIndex - 1] : null,
-		
+			next: currentIndex < photosOnly.length - 1 ? photosOnly[currentIndex + 1] : null
-		// Adjust if we're near the beginning
-		if (start < 0) {
-			end = Math.min(photoItems.length, end - start)
-			start = 0
 		}
-		
-		// Adjust if we're near the end
-		if (end > photoItems.length) {
-			start = Math.max(0, start - (end - photoItems.length))
-			end = photoItems.length
-		}
-		
-		// Ensure we always get up to targetCount items if available
-		const itemsCount = end - start
-		if (itemsCount < targetCount && photoItems.length >= targetCount) {
-			if (start === 0) {
-				end = Math.min(targetCount, photoItems.length)
-			} else {
-				start = Math.max(0, photoItems.length - targetCount)
-			}
-		}
-		
-		return photoItems.slice(start, end)
 	})
 
-	// Handle filmstrip navigation
+	// Handle photo navigation
-	function handleFilmstripClick(item: any) {
+	function navigateToPhoto(item: any) {
-		if (isAlbum(item)) {
+		if (!item) return
-			goto(`/photos/${item.slug}`)
+		const photoId = item.id.replace('photo-', '')
-		} else {
+		goto(`/photos/p/${photoId}`)
-			const photoId = item.id.replace('photo-', '')
-			goto(`/photos/p/${photoId}`)
-		}
-	}
-
-	// Modal handlers
-	function openModal() {
-		showModal = true
-		document.body.style.overflow = 'hidden'
-	}
-
-	function closeModal() {
-		showModal = false
-		document.body.style.overflow = ''
 	}
 
 	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape' && showModal) {
+		// Arrow key navigation for photos
-			closeModal()
+		if (e.key === 'ArrowLeft' && adjacentPhotos().prev) {
+			navigateToPhoto(adjacentPhotos().prev)
+		} else if (e.key === 'ArrowRight' && adjacentPhotos().next) {
+			navigateToPhoto(adjacentPhotos().next)
 		}
 	}
 
 	// Set up keyboard listener
 	$effect(() => {
-		if (showModal) {
+		window.addEventListener('keydown', handleKeydown)
-			window.addEventListener('keydown', handleKeydown)
+		return () => window.removeEventListener('keydown', handleKeydown)
-			return () => window.removeEventListener('keydown', handleKeydown)
-		}
 	})
 </script>
 
@@ -176,9 +141,50 @@
 	</div>
 {:else if photo}
 	<div class="photo-page">
-		<button class="photo-container" onclick={openModal} type="button">
+		<div class="photo-content-wrapper">
-			<img src={photo.url} alt={photo.title || photo.caption || 'Photo'} class="photo-image" />
+			<div class="photo-container">
-		</button>
+				<Zoom>
+					<img src={photo.url} alt={photo.title || photo.caption || 'Photo'} class="photo-image" />
+				</Zoom>
+			</div>
+
+			<!-- Adjacent Photos Navigation (Desktop Only) -->
+			<div class="adjacent-photos">
+				{#if adjacentPhotos().prev}
+					<button 
+						class="adjacent-photo prev"
+						onclick={() => navigateToPhoto(adjacentPhotos().prev)}
+						type="button"
+						aria-label="Previous photo"
+					>
+						<img 
+							src={adjacentPhotos().prev.src} 
+							alt={adjacentPhotos().prev.alt}
+							class="adjacent-image"
+						/>
+					</button>
+				{:else}
+					<div class="adjacent-placeholder"></div>
+				{/if}
+
+				{#if adjacentPhotos().next}
+					<button 
+						class="adjacent-photo next"
+						onclick={() => navigateToPhoto(adjacentPhotos().next)}
+						type="button"
+						aria-label="Next photo"
+					>
+						<img 
+							src={adjacentPhotos().next.src} 
+							alt={adjacentPhotos().next.alt}
+							class="adjacent-image"
+						/>
+					</button>
+				{:else}
+					<div class="adjacent-placeholder"></div>
+				{/if}
+			</div>
+		</div>
 
 		<div class="photo-info-card">
 			{#if photo.title || photo.caption || photo.description}
@@ -259,64 +265,14 @@
 			{/if}
 		</div>
 
-		<!-- Filmstrip Navigation -->
+		<!-- Navigation Footer -->
-		<div class="filmstrip-card">
+		<div class="navigation-footer">
-			<div class="filmstrip-container">
+			<BackButton
-				{#each filmstripItems() as item}
+				href={photo.album ? `/photos/${photo.album.slug}` : '/photos'}
-					<button 
+				label={photo.album ? `Back to ${photo.album.title}` : 'Back to Photos'}
-						class="filmstrip-item" 
+			/>
-						class:selected={item.id === currentPhotoId}
-						onclick={() => handleFilmstripClick(item)}
-						type="button"
-					>
-						{#if isAlbum(item)}
-							<img 
-								src={item.coverPhoto.src} 
-								alt={item.title}
-								class="filmstrip-image"
-							/>
-							<div class="album-indicator">
-								<span class="album-count">{item.photos.length}</span>
-							</div>
-						{:else}
-							<img 
-								src={item.src} 
-								alt={item.alt}
-								class="filmstrip-image"
-							/>
-						{/if}
-					</button>
-				{/each}
-			</div>
-			
-			<div class="card-footer">
-				<BackButton
-					href={photo.album ? `/photos/${photo.album.slug}` : '/photos'}
-					label={photo.album ? `Back to ${photo.album.title}` : 'Back to Photos'}
-				/>
-			</div>
 		</div>
 	</div>
-
-	<!-- Photo Modal -->
-	{#if showModal}
-		<div 
-			class="photo-modal" 
-			onclick={closeModal}
-			role="dialog"
-			aria-modal="true"
-			aria-label="Full size photo"
-		>
-			<div class="modal-content">
-				<img 
-					src={photo.url} 
-					alt={photo.title || photo.caption || 'Photo'} 
-					class="modal-image"
-					onclick={closeModal}
-				/>
-			</div>
-		</div>
-	{/if}
 {/if}
 
 <style lang="scss">
@@ -367,57 +323,19 @@
 		}
 	}
 
+	.photo-content-wrapper {
+		position: relative;
+		max-width: 700px;
+		width: 100%;
+	}
+
 	.photo-container {
 		max-width: 700px;
 		width: 100%;
 		font-size: 0;
 		line-height: 0;
-		border: none;
-		padding: 0;
-		background: none;
-		cursor: zoom-in;
 		position: relative;
 
-		&::before {
-			content: '';
-			position: absolute;
-			inset: -3px;
-			border-radius: $image-corner-radius;
-			border: 3px solid transparent;
-			z-index: 2;
-			pointer-events: none;
-			transition: border-color 0.2s ease;
-		}
-
-		&::after {
-			content: '';
-			position: absolute;
-			inset: 0;
-			border-radius: $image-corner-radius;
-			border: 2px solid transparent;
-			z-index: 3;
-			pointer-events: none;
-			transition: border-color 0.2s ease;
-		}
-
-		&:focus-visible {
-			outline: none;
-
-			&::before {
-				border-color: $red-60;
-			}
-
-			&::after {
-				border-color: $grey-100;
-			}
-		}
-
-		&:hover {
-			.photo-image {
-				opacity: 0.95;
-			}
-		}
-
 		.photo-image {
 			display: block;
 			max-width: 100%;
@@ -426,7 +344,6 @@
 			object-fit: contain;
 			border-radius: $image-corner-radius;
 			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-			transition: opacity 0.2s ease;
 
 			@include breakpoint('phone') {
 				border-radius: $image-corner-radius;
@@ -517,54 +434,66 @@
 		}
 	}
 
-	// Filmstrip Navigation
+	// Navigation Footer
-	.filmstrip-card {
+	.navigation-footer {
-		background: $grey-100;
+		display: flex;
-		border: 1px solid $grey-90;
+		justify-content: center;
-		border-radius: $image-corner-radius;
-		padding: $unit-4x;
 		max-width: 700px;
 		margin: 0 auto;
 		width: 100%;
-		box-sizing: border-box;
-
-		@include breakpoint('phone') {
-			padding: $unit-3x;
-			max-width: 100%;
-		}
 	}
 
-	.filmstrip-container {
+	// Adjacent Photos Navigation
+	.adjacent-photos {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: calc(100% + 400px); // Add space for the adjacent images
 		display: flex;
-		justify-content: center;
+		justify-content: space-between;
 		align-items: center;
-		gap: $unit-2x;
+		pointer-events: none;
-		margin-bottom: $unit-2x;
+		z-index: 10;
-		padding: $unit 0;
 
-		@include breakpoint('phone') {
+		// Hide on mobile and tablet
-			gap: $unit;
+		@include breakpoint('tablet') {
+			display: none;
 		}
 	}
 
-	.filmstrip-item {
+	.adjacent-photo,
-		flex: 0 0 auto;
+	.adjacent-placeholder {
-		height: 100px;
+		width: 200px;
+		height: 300px;
+		pointer-events: auto;
+	}
+
+	.adjacent-photo {
 		position: relative;
 		border: none;
 		padding: 0;
 		background: none;
 		cursor: pointer;
-		border-radius: $corner-radius-md;
+		border-radius: $image-corner-radius;
 		overflow: hidden;
-		transition: all 0.2s ease;
+		transition: all 0.3s ease;
-		opacity: 0.6;
+		opacity: 0.3;
+		filter: grayscale(100%);
+
+		&.prev {
+			transform: translateX(-25%);
+		}
+
+		&.next {
+			transform: translateX(25%);
+		}
 
 		&::before {
 			content: '';
 			position: absolute;
-			inset: 0;
+			inset: -3px;
-			border-radius: $corner-radius-md;
+			border-radius: $image-corner-radius;
 			border: 3px solid transparent;
 			z-index: 2;
 			pointer-events: none;
@@ -574,8 +503,8 @@
 		&::after {
 			content: '';
 			position: absolute;
-			inset: 3px;
+			inset: 0;
-			border-radius: calc($corner-radius-md - 3px);
+			border-radius: $image-corner-radius;
 			border: 2px solid transparent;
 			z-index: 3;
 			pointer-events: none;
@@ -583,12 +512,17 @@
 		}
 
 		&:hover {
-			opacity: 1;
+			opacity: 0.6;
-			transform: scale(1.02);
+			filter: grayscale(50%);
+			transform: scale(1.02) translateX(-25%);
+
+			&.next {
+				transform: scale(1.02) translateX(25%);
+			}
 		}
 
-		&.selected {
+		&:focus-visible {
-			opacity: 1;
+			outline: none;
 
 			&::before {
 				border-color: $red-60;
@@ -598,68 +532,12 @@
 				border-color: $grey-100;
 			}
 		}
-
-		@include breakpoint('phone') {
-			height: 70px;
-		}
 	}
 
-	.filmstrip-image {
+	.adjacent-image {
+		width: 100%;
 		height: 100%;
-		width: auto;
 		object-fit: cover;
 		display: block;
 	}
-
-	.album-indicator {
-		position: absolute;
-		bottom: $unit-half;
-		right: $unit-half;
-		background: rgba(0, 0, 0, 0.7);
-		color: white;
-		padding: 2px 6px;
-		border-radius: $corner-radius-xs;
-		font-size: 0.75rem;
-		font-weight: 600;
-	}
-
-	.card-footer {
-		display: flex;
-		justify-content: center;
-	}
-
-	// Modal styles
-	.photo-modal {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(0, 0, 0, 0.7);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 1000;
-		cursor: zoom-out;
-		padding: $unit-2x;
-		box-sizing: border-box;
-	}
-
-	.modal-content {
-		position: relative;
-		max-width: 95vw;
-		max-height: 95vh;
-		cursor: default;
-	}
-
-	.modal-image {
-		display: block;
-		width: auto;
-		height: auto;
-		max-width: 100%;
-		max-height: 95vh;
-		object-fit: contain;
-		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-		cursor: zoom-out;
-	}
 </style>