Image lightbox showcase
This post exercises the built-in image lightbox in every situation, using plain grey placeholder images. Click any image in the post body to open it full screen, then click anywhere or press Esc to close. Images that are wrapped in a link are intentionally left alone so the link still works.
1. Standard Markdown image
A plain Markdown image. It should be zoomable, and its alt text becomes the dialog label.
2. Image in a figure with a caption
Wrapped in <figure> with a <figcaption>. The image is zoomable; the caption stays put.
3. Linked image (must stay a link)
This image is wrapped in a link. Clicking it should follow the link, not open the lightbox.
4. Image without alt text
No alt attribute. Still zoomable; the dialog falls back to a generic label.
5. Small image
Images smaller than the viewport are centered and shown at their natural size.
6. Several images in a row
Wrapped in <div class="gallery"> for a neat, equal-height responsive row that wraps on small screens. Each one still opens independently in the lightbox.
7. Inline image inside a paragraph
An image can also sit inline in a sentence like this one and it stays zoomable without breaking the text flow.
8. Raw HTML <img> tag
Authored directly as HTML rather than Markdown — behaves the same.
9. Images inside a list
Images in list items are shrunk to small, aligned thumbnails so the list stays tidy. Each thumbnail is still zoomable.
- A list item that starts with a small thumbnail.
- Another item, with a wider thumbnail.
- A plain list item for comparison.
10. A linked image inside a figure
Combines cases 2 and 3: the figure is decorative, but the image links out, so the link wins over the lightbox.
That covers every case the lightbox needs to handle: plain, captioned, linked, alt-less, small, repeated, inline, raw HTML, and list-embedded images.