Links
AI / Agents
gdtest-lightbox
A synthetic package showcasing the gd-lightbox extension for Great Docs.
Overview
This site demonstrates all lightbox features:
- Click-to-zoom with origin animation
- Dark-mode image variants
- Gallery with filmstrip navigation
- Copy/download toolbar
- Deep-linking
Architecture
Lightbox extension showcase demonstrating the gd-lightbox image viewer with all feature combinations: explicit .lightbox class, auto mode (lightbox: true), dark-mode image variants (naming convention and explicit dark= attribute), gallery grouping with filmstrip navigation, captions and credits, .nolightbox opt-out, and deep-linking.
Source files
gdtest_lightbox/
__init__.py
"""A test package for the gd-lightbox extension."""
__version__ = "1.0.0"
__all__ = ["create_figure"]
def create_figure(title: str, width: int = 600, height: int = 400) -> str:
"""
Create a placeholder figure.
Parameters
----------
title
The title text to render on the figure.
width
Figure width in pixels.
height
Figure height in pixels.
Returns
-------
str
SVG markup for the figure.
"""
return f"<svg>{title}</svg>"images/
diagram.svg
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500"><rect width="800" height="500" fill="#2c3e50" rx="8"/><text x="400" y="256" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Architecture Diagram</text></svg>
screenshot.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"><rect width="600" height="400" fill="#4a90d9" rx="8"/><text x="300" y="206" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">App Screenshot</text></svg>
user_guide/
images/
after.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"><rect width="600" height="400" fill="#2ecc71" rx="8"/><text x="300" y="206" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">After (v0.9)</text></svg>
api-reference.svg
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="450"><rect width="700" height="450" fill="#1e3a5f" rx="8"/><text x="350" y="231" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">API Reference Page</text></svg>
app-layout.dark.svg
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="500"><rect x="0" width="225" height="500" fill="#1a1a2e"/><rect x="225" width="225" height="500" fill="#16213e"/><rect x="450" width="225" height="500" fill="#0f3460"/><rect x="675" width="225" height="500" fill="#1a1a2e"/><text x="450" y="256" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">App Layout (Dark)</text></svg>
app-layout.svg
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="500"><rect x="0" width="225" height="500" fill="#2c3e50"/><rect x="225" width="225" height="500" fill="#34495e"/><rect x="450" width="225" height="500" fill="#3d566e"/><rect x="675" width="225" height="500" fill="#ecf0f1"/><text x="450" y="256" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">App Layout</text></svg>
before.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"><rect width="600" height="400" fill="#bdc3c7" rx="8"/><text x="300" y="206" text-anchor="middle" fill="#333" font-size="16" font-family="sans-serif">Before (v0.8)</text></svg>
chart-1600.svg
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1120"><rect width="1600" height="1120" fill="#8e44ad" rx="8"/><text x="800" y="566" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Chart 1600w (Full)</text></svg>
chart-400.svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="280"><rect width="400" height="280" fill="#8e44ad" rx="8"/><text x="200" y="146" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Chart 400w</text></svg>
chart-800.svg
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="560"><rect width="800" height="560" fill="#8e44ad" rx="8"/><text x="400" y="286" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Chart 800w</text></svg>
chart.svg
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350"><rect width="500" height="350" fill="#8e44ad" rx="8"/><text x="250" y="181" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Revenue Chart</text></svg>
config-panel.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"><rect width="600" height="400" fill="#4a1e5f" rx="8"/><text x="300" y="206" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Configuration Panel</text></svg>
dashboard.dark.svg
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="450"><rect width="700" height="450" fill="#1a1a2e" rx="8"/><text x="350" y="231" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Dashboard (Dark)</text></svg>
dashboard.light.svg
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="450"><rect width="700" height="450" fill="#f8f9fa" rx="8"/><text x="350" y="231" text-anchor="middle" fill="#333" font-size="16" font-family="sans-serif">Dashboard (Light)</text></svg>
diagram-2400.svg
<svg xmlns="http://www.w3.org/2000/svg" width="2400" height="1500"><rect width="2400" height="1500" fill="#2c3e50" rx="8"/><text x="1200" y="756" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Diagram 2400w (Full Res)</text></svg>
diagram.svg
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500"><rect width="800" height="500" fill="#2c3e50" rx="8"/><text x="400" y="256" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Architecture Diagram</text></svg>
full-page.svg
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800"><rect width="1200" height="800" fill="#2c3e50" rx="8"/><text x="600" y="406" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Full Page Screenshot</text></svg>
hero-gradient.dark.svg
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2d1b69"/><stop offset="100%" stop-color="#1a0533"/></linearGradient></defs><rect width="800" height="400" fill="url(#g)" rx="8"/><text x="400" y="206" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Hero Section (Dark)</text></svg>
hero-gradient.svg
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#667eea"/><stop offset="100%" stop-color="#764ba2"/></linearGradient></defs><rect width="800" height="400" fill="url(#g)" rx="8"/><text x="400" y="206" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Hero Section</text></svg>
icon-small.svg
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" fill="#666" rx="8"/><text x="12" y="18" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">•</text></svg>
mosaic-a.svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><rect width="400" height="300" fill="#1abc9c" rx="8"/><text x="200" y="156" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Gallery A</text></svg>
mosaic-b.svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500"><rect width="400" height="500" fill="#e67e22" rx="8"/><text x="200" y="256" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Gallery B (Tall)</text></svg>
mosaic-c.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300"><rect width="600" height="300" fill="#9b59b6" rx="8"/><text x="300" y="156" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Gallery C (Wide)</text></svg>
mosaic-d.svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><rect width="400" height="400" fill="#34495e" rx="8"/><text x="200" y="206" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Gallery D</text></svg>
pipeline.svg
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="300"><rect width="1000" height="300" fill="#2c3e50" rx="8"/><text x="500" y="156" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Data Pipeline: Ingest → Process → Store → Serve</text></svg>
screenshot.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"><rect width="600" height="400" fill="#4a90d9" rx="8"/><text x="300" y="206" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">App Screenshot</text></svg>
step1.svg
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="320"><rect width="500" height="320" fill="#e74c3c" rx="8"/><text x="250" y="166" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Step 1: Install</text></svg>
step2.svg
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="320"><rect width="500" height="320" fill="#f39c12" rx="8"/><text x="250" y="166" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Step 2: Configure</text></svg>
step3.svg
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="320"><rect width="500" height="320" fill="#27ae60" rx="8"/><text x="250" y="166" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Step 3: Build</text></svg>
step4.svg
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="320"><rect width="500" height="320" fill="#3498db" rx="8"/><text x="250" y="166" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Step 4: Deploy</text></svg>
ui-preview-night.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="380"><rect width="600" height="380" fill="#16213e" rx="8"/><text x="300" y="196" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">UI Preview (Dark)</text></svg>
ui-preview.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="380"><rect width="600" height="380" fill="#ffffff" rx="8"/><text x="300" y="196" text-anchor="middle" fill="#333" font-size="16" font-family="sans-serif">UI Preview (Light)</text></svg>
v1-sidebar.svg
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="500"><rect width="300" height="500" fill="#bdc3c7" rx="8"/><text x="150" y="256" text-anchor="middle" fill="#333" font-size="16" font-family="sans-serif">Sidebar v1</text></svg>
v1-table.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="350"><rect width="600" height="350" fill="#95a5a6" rx="8"/><text x="300" y="181" text-anchor="middle" fill="#fff" font-size="16" font-family="sans-serif">Table v1 — Plain</text></svg>
v2-sidebar.svg
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="500"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2ecc71"/><stop offset="100%" stop-color="#27ae60"/></linearGradient></defs><rect width="300" height="500" fill="url(#g)" rx="8"/><text x="150" y="256" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Sidebar v2</text></svg>
v2-table.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="350"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3498db"/><stop offset="100%" stop-color="#2980b9"/></linearGradient></defs><rect width="600" height="350" fill="url(#g)" rx="8"/><text x="300" y="181" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif">Table v2 — Styled</text></svg>
01-basic-lightbox.qmd
---
title: "Basic Lightbox"
---
## Explicit Lightbox Class
Add `{.lightbox}` to any image to enable click-to-zoom:
{.lightbox}
## With Caption and Credit
{.lightbox caption="Q4 2024 revenue growth across all segments" credit="Data Analytics Team"}
## No Lightbox (opt-out)
This image explicitly opts out with `{.nolightbox}`:
{.nolightbox}
## Inline image (should not get lightbox in auto mode)
Here is an inline icon  within text.02-auto-mode.qmd
---
title: "Auto Mode"
lightbox: true
---
## Auto Lightbox Mode
When `lightbox: true` is set in the page YAML, all block-level images
automatically get lightbox treatment. No `{.lightbox}` class needed.
## Inline images are skipped
This inline icon  should not get
the lightbox treatment because it's inline with text.
## Explicit opt-out still works
{.nolightbox}03-dark-mode.qmd
---
title: "Dark Mode Variants"
---
## Auto-Detected Dark Variants
Images using the `.light.ext` / `.dark.ext` naming convention are
automatically swapped when the user toggles dark mode:
{.lightbox}
Toggle between light and dark mode to see the image change.
## Explicit Dark Variant
Use the `dark="..."` attribute to specify a non-conventionally named
dark variant:
{.lightbox dark="images/ui-preview-night.svg"}04-galleries.qmd
---
title: "Galleries"
---
## Grouped Gallery
Images with the same `group` attribute form a gallery. Click any image,
then use arrows or the filmstrip to navigate between them:
{.lightbox group="tutorial"}
{.lightbox group="tutorial"}
{.lightbox group="tutorial"}
{.lightbox group="tutorial"}
## Separate Gallery (Different Group)
These images are in a different group and form their own gallery:
{.lightbox group="mosaic"}
{.lightbox group="mosaic"}
{.lightbox group="mosaic"}
{.lightbox group="mosaic"}
## Gallery with Loop Disabled
This gallery stops at the first and last image (no wrap-around):
{.lightbox group="no-loop" loop="false"}
{.lightbox group="no-loop" loop="false"}
{.lightbox group="no-loop" loop="false"}
## Auto-Advancing Gallery
This gallery auto-advances every 3 seconds (with loop):
{.lightbox group="autoplay" autoplay="3s"}
{.lightbox group="autoplay" autoplay="3s"}
{.lightbox group="autoplay" autoplay="3s"}
{.lightbox group="autoplay" autoplay="3s"}
## Auto-Advancing Without Loop
Auto-advances every 2 seconds and stops at the last image:
{.lightbox group="autoplay-nol" autoplay="2s" loop="false"}
{.lightbox group="autoplay-nol" autoplay="2s" loop="false"}
{.lightbox group="autoplay-nol" autoplay="2s" loop="false"}
## Single Image (No Gallery)
A standalone lightbox image without a group:
{.lightbox}05-responsive-srcset.qmd
---
title: "Responsive Images"
---
## Responsive srcset
The thumbnail uses a responsive `srcset` so the browser picks the best
size for the viewport. When clicked, the lightbox loads the highest-
resolution source automatically.
{.lightbox srcset="images/chart-400.svg 400w, images/chart-800.svg 800w, images/chart-1600.svg 1600w" sizes="(max-width: 600px) 400px, 800px"}
## Explicit full-src Override
Use `full-src` to point the lightbox at a specific high-res file
regardless of what `srcset` contains:
{.lightbox full-src="images/diagram-2400.svg"}
## Srcset with Dark Mode
Responsive images can also combine with dark-mode variants. The lightbox
will prefer the dark variant when in dark mode:
{.lightbox srcset="images/dashboard.light.svg 700w" dark="images/dashboard.dark.svg"}06-comparison.qmd
---
title: "Image Comparison"
---
## Shortcode Syntax
Use the `{{< compare >}}` shortcode for a quick before/after slider:
{{< compare before="images/before.svg" after="images/after.svg" >}}
## Custom Labels
{{< compare before="images/before.svg" after="images/after.svg" label-before="v0.8" label-after="v0.9" >}}
## Custom Start Position
Start the divider at 30% (showing mostly the "after" image):
{{< compare before="images/before.svg" after="images/after.svg" start="30" >}}
## Vertical Split
{{< compare before="images/before.svg" after="images/after.svg" direction="vertical" >}}
## Fenced Div Syntax
The fenced div syntax offers more control:
::: {.lightbox-compare}
:::
## Fenced Div with Options
::: {.lightbox-compare direction="vertical" start="70"}
:::07-annotations.qmd
---
title: "Image Annotations"
---
## Basic Annotations
Numbered markers are positioned over the image using percentage
coordinates. Hover or click a marker to see its description:
{.lightbox annotations='[{"x": 15, "y": 20, "label": "1", "text": "Navigation sidebar with collapsible sections"}, {"x": 50, "y": 35, "label": "2", "text": "Main content area with rendered documentation"}, {"x": 85, "y": 50, "label": "3", "text": "Table of contents for the current page"}]'}
## Custom Labels
Annotations can use any short label text (letters, symbols):
{.lightbox annotations='[{"x": 25, "y": 30, "label": "A", "text": "Revenue metrics widget"}, {"x": 75, "y": 30, "label": "B", "text": "User growth chart"}, {"x": 50, "y": 70, "label": "C", "text": "Recent activity feed"}]'}
## Custom Marker Colors
Individual markers can have custom colors for categorization:
{.lightbox annotations='[{"x": 20, "y": 50, "label": "1", "text": "Input stage", "color": "#e74c3c"}, {"x": 50, "y": 50, "label": "2", "text": "Processing stage", "color": "#f39c12"}, {"x": 80, "y": 50, "label": "3", "text": "Output stage", "color": "#27ae60"}]'}
## Multi-Panel Layout Annotations
A complex UI with annotations pointing to specific panels:
{.lightbox dark="images/app-layout.dark.svg" annotations='[{"x": 12, "y": 50, "label": "1", "text": "Sidebar navigation — collapsible tree of pages", "color": "#3498db"}, {"x": 38, "y": 30, "label": "2", "text": "Document body — rendered Markdown content", "color": "#2ecc71"}, {"x": 62, "y": 50, "label": "3", "text": "Code panel — interactive examples", "color": "#e67e22"}, {"x": 88, "y": 30, "label": "4", "text": "On This Page — auto-generated TOC", "color": "#9b59b6"}]'}
## Pipeline Diagram
Annotations along a horizontal data flow:
{.lightbox annotations='[{"x": 12, "y": 50, "label": "①", "text": "Ingest: raw data arrives via API or file upload"}, {"x": 37, "y": 50, "label": "②", "text": "Process: validation, transformation, enrichment"}, {"x": 62, "y": 50, "label": "③", "text": "Store: write to database and search index"}, {"x": 87, "y": 50, "label": "④", "text": "Serve: API and documentation site consume data"}]'}
## Annotations with Dark Mode
Annotations work with dark-mode variant images. The markers adjust
their appearance automatically:
{.lightbox dark="images/ui-preview-night.svg" annotations='[{"x": 50, "y": 25, "label": "H", "text": "Header with navigation"}, {"x": 50, "y": 75, "label": "F", "text": "Footer with links"}]'}08-toolbar-links.qmd
---
title: "Toolbar & Deep Links"
---
## Toolbar Actions
When the lightbox is open, a toolbar provides quick actions. Hover over
the lightbox image to reveal it (auto-hides after 3 seconds).
### Copy to Clipboard
Click the **copy** button (clipboard icon) to copy the full-resolution
image directly to your clipboard — paste it into Slack, a bug report,
or a presentation:
{.lightbox caption="Copy this image to share the API reference layout"}
### Download
Click the **download** button (arrow icon) to save the full-resolution
image with a meaningful filename derived from the alt text:
{.lightbox caption="Download this image for your slide deck"}
### Copy Link
Click the **link** button (chain icon) to copy a URL that opens this
page with the lightbox already open at this exact image:
{.lightbox caption="Share this deep link with your team"}
## Deep Linking
### How It Works
Each lightbox image gets a unique ID (e.g., `gd-lb-1`). The URL
fragment `#lightbox=gd-lb-N` opens the lightbox at that image on
page load.
Try these links (they point to images on this page):
- [Open the API Reference image](#lightbox=gd-lb-1)
- [Open the Configuration Panel](#lightbox=gd-lb-2)
- [Open the Full Application image](#lightbox=gd-lb-3)
### Gallery Deep Links
Deep links also work within galleries. Click the link below to open
the gallery at a specific image:
{.lightbox group="deep-demo"}
{.lightbox group="deep-demo"}
{.lightbox group="deep-demo"}
{.lightbox group="deep-demo"}
- [Open gallery at Step 3](#lightbox=gd-lb-7)09-showcase.qmd
---
title: "Full Showcase"
lightbox: true
---
## Complete Feature Showcase
This page demonstrates all gd-lightbox capabilities working together.
`lightbox: true` is set in the page YAML so all block images are
automatically enhanced.
---
### Auto Mode + Captions
All block-level images get lightbox treatment automatically. Captions
and credits appear in the lightbox overlay:
{caption="The hero section uses a vibrant gradient that adapts to dark mode" credit="Design Team"}
---
### Dark-Mode Variants in Auto Mode
These images swap automatically when the user toggles the theme:
{dark="images/app-layout.dark.svg" caption="Multi-panel application interface"}
{dark="images/hero-gradient.dark.svg"}
---
### Gallery + Dark Variants + Autoplay
A gallery where each image has a dark variant, auto-advancing every
4 seconds:
{group="showcase-gallery" dark="images/dashboard.dark.svg" autoplay="4s" caption="Dashboard metrics"}
{group="showcase-gallery" dark="images/app-layout.dark.svg" autoplay="4s" caption="Application layout"}
{group="showcase-gallery" dark="images/hero-gradient.dark.svg" autoplay="4s" caption="Landing page hero"}
---
### Gallery Stack (single cover)
A `.lightbox-gallery` collapses a set of images into one framed,
stacked cover that takes a fixed amount of space. Click it to page
through the whole gallery in the lightbox:
::: {.lightbox-gallery}
{caption="Build pipeline"}
{caption="API reference"}
{caption="Configuration panel"}
:::
---
### Annotated Gallery
A gallery where each image also has annotations. Click any image,
then explore the markers:
{group="annotated" annotations='[{"x": 12, "y": 50, "label": "1", "text": "Sidebar"}, {"x": 50, "y": 50, "label": "2", "text": "Content"}, {"x": 88, "y": 50, "label": "3", "text": "TOC"}]'}
{group="annotated" annotations='[{"x": 25, "y": 50, "label": "A", "text": "Input"}, {"x": 75, "y": 50, "label": "B", "text": "Output"}]'}
---
### Before/After Comparisons
#### Table Redesign
{{< compare before="images/v1-table.svg" after="images/v2-table.svg" label-before="v1 Plain" label-after="v2 Styled" >}}
#### Sidebar Update
{{< compare before="images/v1-sidebar.svg" after="images/v2-sidebar.svg" label-before="Old" label-after="New" direction="vertical" >}}
---
### Responsive Image + Annotations
High-res source loaded in the lightbox, with annotations visible
on the thumbnail:
{srcset="images/chart-400.svg 400w, images/chart-800.svg 800w, images/chart-1600.svg 1600w" sizes="(max-width: 600px) 400px, 800px" annotations='[{"x": 30, "y": 50, "label": "Q3", "text": "Revenue dipped in Q3 due to seasonal factors", "color": "#e74c3c"}, {"x": 70, "y": 30, "label": "Q4", "text": "Strong recovery in Q4 with 42% growth", "color": "#27ae60"}]'}
---
### Multiple Comparison Styles
::: {.lightbox-compare start="25"}
:::
---
### Deep Link Test
Navigate to this page with `#lightbox=gd-lb-1` appended to the URL
to auto-open the hero section image.
### Large Image with Annotations + Caption
{caption="Complete application with all panels visible — use the annotation markers to explore each section" credit="Engineering Team" annotations='[{"x": 20, "y": 25, "label": "①", "text": "File tree and navigation", "color": "#3498db"}, {"x": 50, "y": 50, "label": "②", "text": "Main editing area", "color": "#e74c3c"}, {"x": 80, "y": 75, "label": "③", "text": "Terminal and output panel", "color": "#f39c12"}]'}README.md
# gdtest-lightbox
A synthetic package showcasing the **gd-lightbox** extension for Great Docs.
## Overview
This site demonstrates all lightbox features:
- Click-to-zoom with origin animation
- Dark-mode image variants
- Gallery with filmstrip navigation
- Copy/download toolbar
- Deep-linking
{.lightbox}
## Architecture
{.lightbox caption="System architecture overview" credit="Engineering Team"}great-docs.yml
display_name: Lightbox Demo