Shoji

Zoom, Fullscreen, RotateFlip

Three view-control plugins loaded together — each adds its own toolbar button(s), and none of them know the others exist. All three work with zero configuration: bare plugins: [...], no options object needed.

Shoji not yet initialized.

Open a photo, then try:

• Zoom — the toolbar's +/− buttons, pinch or scroll+ctrl, double-click/ double-tap, or the w/s keys. Drag to pan while zoomed in.
• Fullscreen — the toolbar button, using the real Fullscreen API.
• Rotate/flip — the toolbar's rotate and flip buttons. Try rotating then flipping, then reset and flip then rotate instead: same end result either order, even though the two operations don't commute — Shoji normalizes it.

Code

The whole integration — three plugins, no options object for any of them:

const gallery = new Shoji('#gallery', {
  plugins: [Shoji.Zoom, Shoji.Fullscreen, Shoji.RotateFlip],
});

Each plugin emits its own change event if you want to react to it — e.g. persisting a viewer's preferred zoom level, or just logging it like this page does:

gallery.on('zoomChange', (state) => console.log(state));        // { index, scale }
gallery.on('rotateFlipChange', (state) => console.log(state));  // { index, rotation, flipH, flipV }