गैलरी स्लाइडशो

एल्बम फ़ुल स्क्रीन में खुलता है और अपने-आप चलता है, एक के बाद एक फ़ोटो, जब तक दर्शक उसे रोक न दे। कोई भी फ़ोटो सेव की जा सकती है, और सेव होती है सही नाम वाली मूल फ़ाइल, न कि स्क्रीन पर दिखने वाली छोटी कॉपी।

आज़माएँ

हर वर्ज़न ./api इम्पोर्ट करता है, जो आपके बैकएंड की जगह खड़ा है: photos Lightbox के LightboxItem के आकार में एक एल्बम है, हर फ़ोटो के साथ दिखाने का पता, डाउनलोड होने वाली फ़ाइल और सेव करने का नाम। इसकी जगह अपना एल्बम लगाएँ।

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

कोई फ़ोटो खोलें: स्लाइडशो तुरंत शुरू होता है और हर तीन सेकंड में आगे बढ़ता है। बार से उसे रोकें, या डाउनलोड बटन से फ़ोटो सेव करें।

यह क्यों काम करता है

• दो prop से Lightbox डाउनलोड वाला स्लाइडशो बन जाता है। autoAdvance Lightbox खुलते ही चलाना शुरू कर देता है, और showDownload वह बटन जोड़ता है जो मौजूदा फ़ोटो सेव करता है। डिफ़ॉल्ट बार में play/pause बटन और डाउनलोड बटन अपने-आप आ जाते हैं। दोनों prop React, Vue और Angular के लिए समझाए गए हैं, हर पेज पर ठीक बाद डाउनलोड का सेक्शन है।
• स्लाइडशो हर फ़ोटो का इंतज़ार करता है। autoAdvanceInterval उस पल से गिना जाता है जब फ़ोटो लोड हो चुकी हो, इसलिए धीमा कनेक्शन कोई तस्वीर किसी के देखने से पहले नहीं छोड़ता। टाइमिंग core का createSlideshowController है, जो ऑटोप्ले गाइड में बताया गया है।
• कंट्रोल दर्शक के हाथ में रहता है। स्वाइप करने या कोई कुंजी दबाने से हाथ से आगे बढ़ते हैं और अगली फ़ोटो का इंटरवल शून्य से शुरू होता है, स्लाइडशो चालू रहता है। PlayPauseButton उसे रोकता और फिर चलाता है, और किसी बटन या कैप्शन पर टिका पॉइंटर उसे तब तक रोके रखता है जब तक वहाँ टिका है। आख़िरी फ़ोटो पर यह रुक जाता है, जब तक loop सेट न हो।
• छोटी कॉपी दिखाएँ, मूल फ़ाइल सेव करें। src वह है जो स्क्रीन दिखाती है, इसलिए छोटी की हुई कॉपी गैलरी को तेज़ रखती है। downloadUrl वह है जो बटन सेव करता है, और downloadName फ़ाइल का नाम, ताकि दर्शक के पास पूरी फ़ोटो ऐसे नाम से रहे जो बताए कि वह क्या है। सैंपल CDN एक ही साइज़ देता है, इसलिए यहाँ दोनों एक ही फ़ाइल की ओर इशारा करते हैं। ये फ़ील्ड LightboxItem टाइप में हैं।
• दूसरे origin से डाउनलोड के लिए CORS चाहिए। दूसरे origin के लिंक पर download एट्रिब्यूट अनदेखा हो जाता है, इसलिए Lightbox फ़ाइल fetch करके सेव करता है। इसके लिए फ़ाइल के सर्वर को आपकी साइट के लिए Access-Control-Allow-Origin के साथ जवाब देना होगा। ऐसा न होने पर फ़ोटो नए टैब में खुलती है, ताकि दर्शक फिर भी उसे सेव कर सके। देखें downloadFile।