jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Slideshow thumbnail overflow behavior

Browse source
This commit is contained in:
Justin Edmund 2025-06-02 10:49:45 -07:00
parent 0354b798d3
commit 46aa8f1155
1 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/lib/components/Slideshow.svelte
View file

@ -34,25 +34,34 @@
// Calculate columns based on breakpoints // Calculate columns based on breakpoints
const columnsPerRow = $derived(windowWidth <= 400 ? 3 : windowWidth <= 600 ? 4 : 6) const columnsPerRow = $derived(windowWidth <= 400 ? 3 : windowWidth <= 600 ? 4 : 6)
const showMoreThumbnail = $derived(maxThumbnails && totalCount && totalCount > maxThumbnails - 1) // Make maxThumbnails responsive - use fewer thumbnails on smaller screens
const responsiveMaxThumbnails = $derived(
maxThumbnails ? (windowWidth <= 400 ? 3 : windowWidth <= 600 ? 4 : maxThumbnails) : undefined
)
const showMoreThumbnail = $derived(
responsiveMaxThumbnails && totalCount && totalCount > responsiveMaxThumbnails - 1
)
// Determine how many thumbnails to show // Determine how many thumbnails to show
const displayItems = $derived( const displayItems = $derived(
!maxThumbnails || !showMoreThumbnail !responsiveMaxThumbnails || !showMoreThumbnail
? items ? items
: items.slice(0, maxThumbnails - 1) // Show actual thumbnails, leave last slot for "+N" : items.slice(0, responsiveMaxThumbnails - 1) // Show actual thumbnails, leave last slot for "+N"
) )
const remainingCount = $derived( const remainingCount = $derived(
showMoreThumbnail ? (totalCount || items.length) - (maxThumbnails - 1) : 0 showMoreThumbnail ? (totalCount || items.length) - (responsiveMaxThumbnails - 1) : 0
) )
const totalSlots = $derived( const totalSlots = $derived(
maxThumbnails responsiveMaxThumbnails
? maxThumbnails ? responsiveMaxThumbnails
: Math.ceil((displayItems.length + (showMoreThumbnail ? 1 : 0)) / columnsPerRow) * columnsPerRow : Math.ceil((displayItems.length + (showMoreThumbnail ? 1 : 0)) / columnsPerRow) * columnsPerRow
) )
// Convert items to image URLs for lightbox // Convert items to image URLs for lightbox
const lightboxImages = $derived(items.map(item => item.url)) const lightboxImages = $derived(items.map((item) => item.url))
const selectImage = (index: number) => { const selectImage = (index: number) => {
selectedIndex = index selectedIndex = index