Shoji

Examples

Real, runnable HTML files — not just snippets. Each one is fully self-contained (inline placeholder images, no dependency on any external asset) and loads Shoji the same way a plain <script>-tag integration would: from dist/, no bundler.

Run npm run build first — these load ../dist/shoji.min.js + ../dist/shoji.min.css directly, same as the demo's own demo/standalone.html. Then open any example file directly in a browser (file:// works fine — the UMD build is a classic script, not a module).

• Quickstart

  The absolute minimum: default selector mode, no options object at all.

• Thumbnails + originals

  Two image sizes per photo — a small one for the grid, the original for the lightbox — with the Layout plugin. The two-tier thumb/src pattern.

• Custom plugin + custom data

  A ~15-line plugin reading item.data (populated from a data-shoji-* attribute Shoji doesn't already know about) and adding its own toolbar button.

• Dynamic mode, video, and events

  Hand-built items array including a video item, with every core lifecycle event logged live on the page as it fires.

• Autoplay + ActiveThumbnail

  A slideshow that keeps the host's own thumbnail strip in sync with the active slide — highlighting it and scrolling it into view on every advance.

• Zoom, Fullscreen, RotateFlip

  Three view-control plugins loaded together, each with its own toolbar button(s) — pinch/ wheel/keyboard zoom, native fullscreen, and non-destructive rotate/flip.

• Infinite scroll

  Forward-only append, and the harder bidirectional case — loading older content above the fold without the page jumping. Built entirely from updateSlides() and a plain IntersectionObserver, no dedicated plugin involved.

Every officially-demonstrated feature also has a working page under demo/pages/ in the repo (Vite dev server, npm run dev) — these docs examples are the same patterns, just as standalone files you can copy wholesale into your own project.