Galeria com apresentação

Um álbum abre em tela cheia e roda sozinho, uma foto depois da outra, até o usuário pausar. Qualquer foto pode ser salva, e o que se salva é o arquivo original com um nome adequado, não a cópia reduzida que aparece na tela.

Experimente

Todas as versões importam ./api, que faz o papel do seu backend: photos é um álbum no formato do LightboxItem do Lightbox, cada foto com o endereço para mostrar, o arquivo para baixar e o nome com que ele é salvo. Troque pelo seu próprio á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

Abra uma foto: a apresentação começa na hora e avança a cada três segundos. Pause pela barra ou salve a foto com o botão de download.

Por que funciona

• Duas props transformam o Lightbox numa apresentação com downloads. autoAdvance começa a tocar assim que o Lightbox abre, e showDownload adiciona o botão que salva a foto atual. A barra padrão ganha sozinha o botão de play e pausa e o botão de download. As duas props são explicadas para React, Vue e Angular, cada página com uma seção de download logo depois.
• A apresentação espera cada foto. autoAdvanceInterval é contado a partir do momento em que a foto carregou, então uma conexão lenta nunca pula uma imagem antes de alguém vê-la. A temporização é o createSlideshowController do core, descrito no guia de autoplay.
• O usuário continua no controle. Deslizar ou apertar uma tecla avança à mão e reinicia do zero o intervalo da próxima foto, com a apresentação ainda ligada. O PlayPauseButton para e retoma a apresentação, e um ponteiro parado sobre um botão ou sobre a legenda a segura enquanto estiver ali. Na última foto ela para, a não ser que loop esteja ligado.
• Mostre uma cópia pequena, salve o original. src é o que a tela mostra, então uma cópia redimensionada deixa a galeria rápida. downloadUrl é o que o botão salva, e downloadName é o nome que o arquivo recebe, então o usuário fica com a foto inteira sob um nome que diz o que ela é. O CDN de exemplo serve um só tamanho, então aqui os dois apontam para o mesmo arquivo. Os campos estão no tipo LightboxItem.
• Downloads de outra origem precisam de CORS. O atributo download é ignorado num link para outra origem, então o Lightbox busca o arquivo e o salva. Para isso o servidor do arquivo precisa responder com Access-Control-Allow-Origin para o seu site. Quando não responde, a foto abre numa nova aba, para o usuário ainda conseguir salvá-la. Veja downloadFile.