उत्तरदायी और अनुकूलन योग्य छवि गैलरी प्लगइन

लाइटगैलरी के साथ शुरुआत करना

NPM के माध्यम से LightGallery स्थापित करने का अनुशंसित तरीका। कृपया इसे स्थापित करने के लिए निम्न आदेश का उपयोग करें।

 npm install lightgallery.js

इमेज मैनीपुलेशन के लिए फ्री जावास्क्रिप्ट एपीआई

Lightgallery.js कई बिल्ट-इन मॉड्यूल्स के साथ आता है जैसे थंबनेल बनाना, फुल स्क्रीन, जूम इन और आउट, आदि, जिन्हें जरूरत न होने पर छोड़ दिया जा सकता है। आप अपनी परियोजना की आवश्यकता के आधार पर अपने स्वयं के मॉड्यूल भी जोड़ सकते हैं। छवियों और वीडियो का आकार बदलने की JavaScript पद्धति के विपरीत, Lightgallery.js प्रतिक्रियाशील आकार बदलने के लिए केवल CSS दृष्टिकोण का उपयोग करता है जिससे यह काफी तेज़ और अधिक लचीला हो जाता है। बस अपनी गैलरी के SASS चरों को अपडेट करके आप अपनी आवश्यकताओं के अनुसार प्लगइन को आसानी से अनुकूलित कर सकते हैं।

मुफ़्त JavaScript API के ज़रिए थंबनेल बनाएं

जब थंबनेल की बात आती है, तो Lightgallery.js आपको अधिक आधुनिक अनुभव देने के लिए YouTube की तरह ही एनिमेटेड थंबनेल सक्षम करने की अनुमति देता है। आपके YouTube या Vimeo गैलरी के लिए एनिमेटेड थंबनेल भी सक्रिय किए जा सकते हैं। Lightgallery.js प्लगइन में निर्मित 20 से अधिक एनिमेशन के साथ आता है जिनका उपयोग सुंदर गैलरी बनाने के लिए किया जा सकता है।

 lightGallery(document.getElementById('static-thumbnails'), {
    animateThumb: false,
    zoomFromOrigin: false,
    allowMediaOverlap: true,
    toggleThumb: true,
});

 lightGallery(document.getElementById('customize-thumbnails-gallery'), {
    // Add a custom class to apply style only for the particular gallery
    addClass: 'lg-custom-thumbnails',
    // Remove the starting animations.
    // This can be done by overriding CSS as well
    appendThumbnailsTo: '.lg-outer',
    animateThumb: false,
    allowMediaOverlap: true,
});