Skip to content

v0.14.0

Choose a tag to compare

View all tags
@rich-iannone rich-iannone released this 16 Jun 14:06
v0.14.0
2593671
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Great Docs v0.14.0 introduces a full-featured lightbox for images. Add a single .lightbox class to any image (or set lightbox: auto on a page) and readers can expand it into a focused, full-screen view with zoom and panning, swipeable galleries, captions and credits, dark-mode image variants, numbered annotations, before/after comparison sliders, and a toolbar for copying, downloading, and deep-linking images. The assets load automatically on every site, so there is nothing to install or enable.

New Features

  • Lightbox — Any image marked with .lightbox opens into a full-screen view with zoom (100–400%) and drag-to-pan. Enable it per image with the .lightbox class, or per page with lightbox: auto (opting individual images out with .nolightbox). (#216)
  • Galleries — Images sharing a group value bind into a gallery that readers page through with arrow buttons, keyboard keys, a filmstrip, and touch swipes, with optional looping and autoplay. A .lightbox-gallery fenced div collapses a set into a compact stacked-photo cover with a count badge. (#216)
  • Annotations — Overlay numbered, tooltip-bearing markers on an image via an annotations JSON array; markers stay anchored on both the thumbnail and the enlarged view. (#216)
  • Before/after comparison — A {{< compare >}} shortcode (or .lightbox-compare div) stacks two images behind a draggable divider, with horizontal or vertical split and a configurable start position. (#216)
  • Dark-mode image variants — Opt in with a dark attribute or a .light/.dark filename convention to swap to a dark-optimized image live when the reader toggles themes. (#216)
  • Captions, credits, and responsive sources — Add caption and credit lines, and serve sharper images in the enlarged view with standard srcset/sizes or an explicit full-src. (#216)
  • Toolbar and deep linking — Copy an image to the clipboard (rasterized to PNG, so SVGs paste cleanly), download it using its alt text as the filename, or copy a #lightbox= deep link that reopens the page on that exact image. (#216)

Documentation

  • Added a new "Lightbox" user guide page covering quick start, galleries, annotations, comparison sliders, dark-mode variants, deep linking, accessibility, and the full attribute reference. (#216)
Assets 2
Loading