The whole integration is the markup below plus new Shoji('#gallery') — no items
array, no options object, no plugins. This is selector mode: Shoji scans
#gallery's direct children for <a href> elements, reads the
nested <img> for the thumbnail, and wires click-to-open automatically.
data-shoji-width/data-shoji-height (the full image's real pixel
size) are optional too, but included below because without them Shoji skips the "grows out of
the thumbnail" open animation entirely — see
Transitions.
The live demo above uses inline SVG placeholder images so this file has no dependency on any external asset — copy the version below into your own project with real image paths instead:
<div id="gallery">
<a href="photo-1-full.jpg" data-shoji-width="800" data-shoji-height="600"><img src="photo-1-thumb.jpg" alt="Photo 1"></a>
<a href="photo-2-full.jpg" data-shoji-width="800" data-shoji-height="600"><img src="photo-2-thumb.jpg" alt="Photo 2"></a>
<a href="photo-3-full.jpg" data-shoji-width="800" data-shoji-height="600"><img src="photo-3-thumb.jpg" alt="Photo 3"></a>
<a href="photo-4-full.jpg" data-shoji-width="800" data-shoji-height="600"><img src="photo-4-thumb.jpg" alt="Photo 4"></a>
</div>
<link rel="stylesheet" href="shoji.min.css" />
<script src="shoji.min.js"></script>
<script>
new Shoji('#gallery');
</script>