Shoji

Autoplay + ActiveThumbnail

A slideshow (Autoplay) that keeps the host's own thumbnail strip in sync with whichever slide is showing (ActiveThumbnail) — neither plugin knows the other exists; ActiveThumbnail reacts to the active slide changing by any means, autoplay ticking forward included.

Open any photo below, then click the lightbox toolbar's play button (or press Space). Watch the strip behind the lightbox — the highlighted thumbnail moves and scrolls into view on every advance, twelve items being more than fit on screen at once. Closing the lightbox stops the slideshow too, not just the visual.

While it's running, tapping/clicking the photo itself (not a video slide) also toggles play/pause, same as the button — try it. (This page doesn't enable the Zoom plugin, but double-tapping to zoom on a page that does is unaffected — it never also pauses/resumes.)

Two video items are mixed in at the end (HTML5, then YouTube) — reaching one shows how Autoplay treats video differently from a timed photo: it plays the video instead of starting the interval timer, and only advances once that video's own ended event fires, however long that actually takes.

Shoji not yet initialized.

Code

The whole integration — three plugins, a shortened interval, and the CSS that defines "active":

const gallery = new Shoji('#gallery', {
  plugins: [Shoji.Autoplay, Shoji.ActiveThumbnail, Shoji.Video], // Video: renders the youtube item
  autoplay: { interval: 1500 }, // default is 5000ms; doesn't apply to video slides
});

The two video items at the end of the strip — plain HTML5 markup, then a YouTube link:

<a href="clip.mp4" data-shoji-width="800" data-shoji-height="600">
  <video poster="clip-poster.jpg">
    <source src="clip.mp4" type="video/mp4" />
  </video>
</a>
<a data-shoji-video="https://www.youtube.com/watch?v=BB49x_uMlGA" data-shoji-width="800" data-shoji-height="600">
  <img src="yt-poster.jpg" alt="YouTube video" />
</a>

/* Shoji only toggles the class — you decide what "active" looks like.
   Negative outline-offset, not positive — pulls it inward so it can't
   spill into a neighboring thumbnail in a tighter grid than this one. */
.shoji-thumb-active img {
  outline: 3px solid #4da3ff;
  outline-offset: -2px;
}

ActiveThumbnail also takes an activeClass option (default 'shoji-thumb-active') and a scrollIntoView option (default true) if you'd rather turn the auto-scroll off and keep just the highlight — or skip writing CSS entirely with its own opt-in highlight: true/ borderColor/highlightDuration options (see Plugins).