Galerie als Diashow

Ein Album öffnet sich im Vollbild und läuft von selbst ab, ein Foto nach dem anderen, bis der Nutzer pausiert. Jedes Foto lässt sich speichern, und gespeichert wird die Originaldatei unter einem passenden Namen, nicht die verkleinerte Kopie, die der Bildschirm zeigt.

Ausprobieren

Jede Version importiert ./api, das für dein Backend steht: photos ist ein Album in der Form von LightboxItem der Lightbox, jedes Foto mit der Adresse zum Anzeigen, der Datei zum Herunterladen und dem Namen, unter dem es gespeichert wird. Ersetze es durch dein eigenes 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

Öffne ein Foto: Die Diashow startet sofort und geht alle drei Sekunden weiter. Pausiere sie über die Leiste oder speichere das Foto mit dem Download-Button.

Warum es funktioniert

• Zwei Props machen aus der Lightbox eine Diashow mit Downloads. autoAdvance startet die Wiedergabe, sobald sich die Lightbox öffnet, und showDownload fügt den Button hinzu, der das aktuelle Foto speichert. Die Standardleiste bekommt den Play/Pause-Button und den Download-Button von selbst. Beide Props sind für React, Vue und Angular beschrieben, jeweils mit einem Abschnitt zum Download direkt danach.
• Die Diashow wartet auf jedes Foto. autoAdvanceInterval zählt ab dem Moment, in dem ein Foto geladen ist, sodass eine langsame Verbindung nie ein Bild überspringt, bevor es jemand gesehen hat. Das Timing kommt von createSlideshowController aus dem Core, beschrieben im Autoplay-Guide.
• Der Nutzer behält die Kontrolle. Wischen oder ein Tastendruck geht von Hand weiter und startet das Intervall des nächsten Fotos bei null, während die Diashow an bleibt. Der PlayPauseButton hält sie an und setzt sie fort, und ein Zeiger, der auf einem Button oder der Bildunterschrift ruht, hält sie an, solange er dort bleibt. Beim letzten Foto stoppt sie, außer loop ist gesetzt.
• Eine kleine Kopie zeigen, das Original speichern. src ist das, was der Bildschirm zeigt, also hält eine verkleinerte Kopie die Galerie schnell. downloadUrl ist das, was der Button speichert, und downloadName ist der Dateiname, den es bekommt, sodass der Nutzer das volle Foto unter einem Namen behält, der sagt, was es ist. Das Beispiel-CDN liefert nur eine Größe, deshalb zeigen hier beide auf eine Datei. Die Felder stehen im Typ LightboxItem.
• Downloads von einem anderen Origin brauchen CORS. Ein download-Attribut wird bei einem Link auf einen anderen Origin ignoriert, deshalb holt die Lightbox die Datei selbst und speichert sie. Dafür muss der Server der Datei mit Access-Control-Allow-Origin für deine Seite antworten. Tut er das nicht, öffnet sich das Foto stattdessen in einem neuen Tab, sodass der Nutzer es trotzdem speichern kann. Siehe downloadFile.