Галерея зі слайдшоу

Альбом відкривається на весь екран і сам відтворюється, фото за фото, поки глядач його не зупинить. Будь-яке фото можна зберегти, і зберігається оригінальний файл під зрозумілою назвою, а не зменшена копія, яку показує екран.

Спробуйте

Кожна версія імпортує ./api, що заміняє ваш бекенд: photos — альбом у формі LightboxItem з Lightbox, де в кожного фото є адреса для показу, файл для завантаження й назва, під якою його зберегти. Замініть його власним альбомом.

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

Відкрийте фото: слайдшоу одразу стартує й перемикає кадр кожні три секунди. Зупиніть його з панелі або збережіть фото кнопкою завантаження.

Чому це працює

• Два пропси перетворюють Lightbox на слайдшоу із завантаженням. autoAdvance запускає відтворення щойно Lightbox відкривається, а showDownload додає кнопку, що зберігає поточне фото. Стандартна панель сама отримує кнопку відтворення й паузи та кнопку завантаження. Обидва пропси описано для React, Vue та Angular, і на кожній сторінці одразу за цим іде розділ про завантаження.
• Слайдшоу чекає на кожне фото. autoAdvanceInterval відлічується з моменту, коли фото завантажилося, тож повільне зʼєднання ніколи не пропускає кадр, якого ще ніхто не побачив. Таймінг — це createSlideshowController з ядра, описаний у посібнику з автовідтворення.
• Глядач лишається головним. Свайп чи натискання клавіші перемикає кадр вручну й запускає інтервал наступного фото з нуля, а слайдшоу лишається ввімкненим. PlayPauseButton зупиняє й відновлює його, а вказівник, що лежить на кнопці чи підписі, притримує його, доки там лежить. На останньому фото воно зупиняється, якщо не задано loop.
• Показуйте малу копію, зберігайте оригінал. src — те, що показує екран, тож зменшена копія тримає галерею швидкою. downloadUrl — те, що зберігає кнопка, а downloadName — назва файлу, тож глядач отримує повне фото під назвою, яка каже, що це. Зразковий CDN віддає лише один розмір, тож тут обидва вказують на один файл. Поля описано в типі LightboxItem.
• Завантаження з іншого джерела потребує CORS. Атрибут download ігнорується в посиланні на інше джерело, тож Lightbox завантажує файл і зберігає його сам. Для цього сервер файлу має відповідати заголовком Access-Control-Allow-Origin для вашого сайту. Якщо ні, фото натомість відкривається в новій вкладці, тож глядач усе одно може його зберегти. Див. downloadFile.