Gallery Slideshow

An album opens full screen and plays on its own, one photo after another, until the viewer pauses it. Any photo can be saved, and what is saved is the original file under a proper name, not the resized copy the screen shows.

Try it

Every version imports ./api, which stands in for your backend: photos is an album in the shape of the lightbox's LightboxItem, each with the address to show, the file to download, and the name to save it under. Replace it with your own album.

import { cdnUrl } from '@reelkit/example-data';

// Stands in for your backend: an album of photos. Each one has the shape of
// `LightboxItem` from the lightbox of your framework, so the list goes to the
// lightbox as it is.

export interface Photo {
  src: string;
  title: string;
  downloadUrl: string;
  downloadName: string;
}

const kTitles = [
  'Morning light',
  'Coastline',
  'Old town',
  'Forest path',
  'Harbour',
  'Mountain pass',
  'Market day',
  'Night street',
  'Lakeside',
];

export const photos: Photo[] = kTitles.map((title, i) => {
  const file = `samples/images/image-${String(i + 1).padStart(2, '0')}.jpg`;
  return {
    // Your app would show a resized copy here and keep the original for the
    // download. The sample CDN serves one size, so both point at one file.
    src: cdnUrl(file),
    title,
    downloadUrl: cdnUrl(file),
    downloadName: `${title.toLowerCase().replace(/\s+/g, '-')}.jpg`,
  };
});

PreviewCode

GallerySlideshow.tsx

PreviewCode

GallerySlideshow.vue

PreviewCode

gallery-slideshow.component.ts

Open a photo: the slideshow starts at once and moves on every three seconds. Pause it from the bar, or save the photo with the download button.

Why it works

• Two props turn the lightbox into a slideshow with downloads. autoAdvance starts playing as soon as the lightbox opens, and showDownload adds the button that saves the current photo. The default bar gains the play and pause button and the download button on its own. Both props are covered for React, Vue, and Angular, each page with a download section right after.
• The slideshow waits for each photo. autoAdvanceInterval is counted from the moment a photo has loaded, so a slow connection never skips a picture before anyone saw it. The timing is createSlideshowController from core, described in the autoplay guide.
• The viewer stays in charge. Swiping or pressing a key moves on by hand and starts the next photo's interval from zero, with the slideshow still on. The PlayPauseButton stops and resumes it, and a pointer resting on a button or the caption holds it for as long as it rests there. On the last photo it stops, unless loop is set.
• Show a small copy, save the original. src is what the screen shows, so a resized copy keeps the gallery fast. downloadUrl is what the button saves, and downloadName is the file name it gets, so the viewer keeps the full photo under a name that says what it is. The sample CDN serves one size, so here both point at one file. The fields are in the LightboxItem type.
• Downloads from another origin need CORS. A download attribute is ignored on a link to another origin, so the lightbox fetches the file and saves it. That needs the file's server to answer with Access-Control-Allow-Origin for your site. When it does not, the photo opens in a new tab instead, so the viewer can still save it. See downloadFile.