Galería con presentación

Un álbum se abre a pantalla completa y se reproduce solo, una foto tras otra, hasta que el usuario lo pausa. Cualquier foto se puede guardar, y lo que se guarda es el archivo original con un nombre adecuado, no la copia redimensionada que muestra la pantalla.

Pruébalo

Todas las versiones importan ./api, que sustituye a tu backend: photos es un álbum con la forma del LightboxItem del lightbox, cada foto con la dirección que se muestra, el archivo que se descarga y el nombre con el que se guarda. Cámbialo por tu propio álbum.

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

Abre una foto: la presentación empieza al momento y avanza cada tres segundos. Páusala desde la barra o guarda la foto con el botón de descarga.

Por qué funciona

• Dos props convierten el lightbox en una presentación con descargas. autoAdvance empieza a reproducir en cuanto se abre el lightbox, y showDownload añade el botón que guarda la foto actual. La barra por defecto incorpora por sí sola el botón de reproducir y pausar y el de descarga. Ambas props se explican para React, Vue y Angular, cada página con una sección de descarga justo después.
• La presentación espera a cada foto. autoAdvanceInterval se cuenta desde que la foto ha cargado, así una conexión lenta nunca salta una imagen antes de que nadie la vea. El tiempo lo lleva createSlideshowController del core, descrito en la guía de reproducción automática.
• El usuario sigue al mando. Deslizar o pulsar una tecla avanza a mano y reinicia desde cero el intervalo de la siguiente foto, con la presentación aún activa. El PlayPauseButton la detiene y la reanuda, y un puntero apoyado en un botón o en el pie de foto la retiene mientras siga ahí. En la última foto se detiene, salvo que loop esté activo.
• Muestra una copia pequeña, guarda el original. src es lo que muestra la pantalla, así una copia redimensionada mantiene la galería rápida. downloadUrl es lo que guarda el botón y downloadName el nombre de archivo que recibe, así el usuario conserva la foto completa con un nombre que dice qué es. El CDN de ejemplo sirve un solo tamaño, así que aquí ambos apuntan al mismo archivo. Los campos están en el tipo LightboxItem.
• Las descargas desde otro origen necesitan CORS. Un atributo download se ignora en un enlace a otro origen, así que el lightbox descarga el archivo con fetch y lo guarda. Para eso, el servidor del archivo debe responder con Access-Control-Allow-Origin para tu sitio. Si no lo hace, la foto se abre en una pestaña nueva, para que el usuario aún pueda guardarla. Consulta downloadFile.