Lightbox demo — image sizes and galleries

Image lightbox test cases

A repeatable demo for checking image enlargement, gallery navigation, captions, keyboard focus and scroll restoration. All images reuse existing Sanity assets. Dimensions below describe the original asset, not the size displayed on screen.

Start with the main image above. Then compare the individual images and galleries below at desktop and mobile widths. Open by click, Enter or Space; use Escape to close. Check that the image and caption finish moving together and that the page returns to the same position.

Individual images — varied source sizes

1. Small landscape (493 × 240)

2. Landscape illustration (1600 × 900)

3. Large landscape photo (4240 × 2832)

4. Square food photo (1200 × 1200)

5. Portrait photo (720 × 960)

6. Tall portrait (540 × 960)

7. Wide panorama (2866 × 1220)

8. Large portrait photo (1504 × 2016)

9. Small portrait (400 × 535)

10. Square demo author portrait (1254 × 1254)

Caption and crop cases

No caption — dialog name falls back to alt text

Long caption — scroll inside the caption bar

Authored crop and off-center hotspot

This uses the same large source as case 3 with an authored crop and an off-center hotspot. Compare the inline and enlarged framing.

Galleries — counts and image formats

Open a gallery from its first, middle and last image. Use arrows or swipe, check looping and the counter, then close and confirm that the inline carousel shows the same selected slide. Gallery framing follows its configured aspect ratio; the underlying source dimensions deliberately vary.

Gallery 1: 1 image — landscape frame

Slides: 1. Frame: 16:9. Uses the global Enable Media Lightbox setting.

Gallery 1, slide 1/1. Large landscape photo — original 4240 × 2832 px. Source: DSC06308.JPG.

1/1

Gallery 2: 2 images — small landscape and large portrait

Slides: 2. Frame: 16:9. Uses the global Enable Media Lightbox setting.

Gallery 2, slide 1/2. Small landscape — original 493 × 240 px. Source: ilya-kafe-og-restaurant.webp.

1/2

Gallery 3: 3 images — portrait, square and panorama

Slides: 3. Frame: 16:9. Uses the global Enable Media Lightbox setting.

Gallery 3, slide 1/3. Portrait photo — original 720 × 960 px. Source: betonggulv-69615_n.jpg.

1/3

Gallery 4: 5 images — mixed sizes, photo frame

Slides: 5. Frame: 3:2. Uses the global Enable Media Lightbox setting.

Gallery 4, slide 1/5. Small portrait — original 400 × 535 px. Source: os-kranservice-as.png.

1/5

Gallery 5: 10 images — thumbnail and looping stress test

Slides: 10. Frame: 4:3. Uses the global Enable Media Lightbox setting.

Gallery 5, slide 1/10. Small landscape — original 493 × 240 px. Source: ilya-kafe-og-restaurant.webp.

1/10

Gallery 6: 3 images — square framing

Slides: 3. Frame: 1:1. Uses the global Enable Media Lightbox setting.

Gallery 6, slide 1/3. Large landscape photo — original 4240 × 2832 px. Source: DSC06308.JPG.

1/3

Gallery 7: 3 images — portrait framing

Slides: 3. Frame: 3:4. Uses the global Enable Media Lightbox setting.

Gallery 7, slide 1/3. Small landscape — original 493 × 240 px. Source: ilya-kafe-og-restaurant.webp.

1/3

Gallery 8: 3 images — vertical framing

Slides: 3. Frame: 9:16. Uses the global Enable Media Lightbox setting.

Gallery 8, slide 1/3. Wide panorama — original 2866 × 1220 px. Source: Os_Knuseverk2_.png.

1/3

Gallery 9: 3 images — legacy default framing

Slides: 3. Frame: unset (16:9 fallback). Uses the global Enable Media Lightbox setting.

Gallery 9, slide 1/3. Large landscape photo — original 4240 × 2832 px. Source: DSC06308.JPG.

1/3

Gallery 10: 2 images

Slides: 2. Frame: 16:9. Uses the global Enable Media Lightbox setting, like every other gallery.

Gallery 10, slide 1/2. Square food photo — original 1200 × 1200 px. Source: carbonara.jpg.

1/2

Gallery 11: images and video

Three slides: landscape image, Mux sample video, portrait image. Click the first image to open the lightbox, then move to the video and press Play. Move to the next image or close the lightbox to check that playback stops. You can also play the video directly in the inline gallery.

Gallery 11, slide 1/3. Landscape image before the video.

1/3

End of test cases

Check opening and closing again after scrolling this far down. Focus should return to the image trigger, the background should unlock, and the page should remain at the same scroll position.