প্রতিক্রিয়াশীল এবং কাস্টমাইজযোগ্য ইমেজ গ্যালারি প্লাগইন

LightGallery দিয়ে শুরু করা হচ্ছে

NPM এর মাধ্যমে LightGallery ইনস্টল করার প্রস্তাবিত উপায়। এটি ইনস্টল করতে নিম্নলিখিত কমান্ড ব্যবহার করুন.

 npm install lightgallery.js

ইমেজ ম্যানিপুলেশন জন্য বিনামূল্যে জাভাস্ক্রিপ্ট API

Lightgallery.js অনেকগুলি অন্তর্নির্মিত মডিউলের সাথে আসে যেমন থাম্বনেইল তৈরি করা, পূর্ণ স্ক্রীন, জুম ইন এবং আউট করা ইত্যাদি যা আপনার প্রয়োজন না হলে বাতিল করা যেতে পারে৷ আপনি আপনার প্রকল্পের প্রয়োজনের উপর নির্ভর করে আপনার নিজস্ব মডিউল যোগ করতে পারেন। ইমেজ এবং ভিডিওর রিসাইজ করার জাভাস্ক্রিপ্ট পদ্ধতির বিপরীতে, Lightgallery.js এটিকে যথেষ্ট দ্রুত এবং আরও নমনীয় করে প্রতিক্রিয়াশীল আকার পরিবর্তনের জন্য শুধুমাত্র একটি CSS পদ্ধতি ব্যবহার করে। কেবলমাত্র আপনার গ্যালারির SASS ভেরিয়েবলগুলি আপডেট করার মাধ্যমে আপনি আপনার প্রয়োজন অনুসারে প্লাগইনটিকে সহজেই কাস্টমাইজ করতে পারেন৷

ফ্রি জাভাস্ক্রিপ্ট 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,
});