Reaktyvus ir pritaikomas vaizdų galerijos papildinys
Lightgallery.js yra naudinga atvirojo kodo vaizdo dydžio keitimo ir tinkinimo priemonė.
Lightgallery.js yra naudingas ir lengvai pritaikomas papildinys, puikiai tinkantis projektams, kuriems reikia daug funkcijų, kai reikia įkelti ir rodyti vaizdo įrašus bei vaizdus svetainėse. Visiškai sukurta „JavaScript“ ir CSS, tai yra visų funkcijų „lightbox“ galerija, kuri siūlo kūrėjams daug galimybių.
Kaip atvirojo kodo, nemokamas įskiepis Lightgallery.js praverčia, kai reikia papildomų parinkčių, išskyrus dydžio keitimą ir vaizdo bei vaizdo įrašų išteklių įkėlimą į savo svetainę galerijos pavidalu. Ji taip pat išsaugo vaizdų ir vaizdo įrašų skaidrėje naršyklės istoriją ir kiekvienam galerijos vaizdui suteikia unikalų URL. Tai ne tik greitas, bet ir lengvas, modulinis, jautrus šviesdėžės galerijos kūrėjas, kuris netrukdo atminties veikimui.
Darbo su „LightGallery“ pradžia
Rekomenduojamas būdas įdiegti „LightGallery“ per NPM. Norėdami ją įdiegti, naudokite šią komandą.
Įdiekite „LightGallery“ per NPM
npm install lightgallery.js
Nemokama JavaScript API vaizdo manipuliavimui
Lightgallery.js yra su daugybe integruotų modulių, pvz., miniatiūrų kūrimas, viso ekrano, priartinimo ir tolinimo ir kt., kurių galima atmesti, jei jums jų nereikia. Taip pat galite pridėti savo modulius, atsižvelgdami į jūsų projekto reikalavimus. Skirtingai nuo „JavaScript“ vaizdų ir vaizdo įrašų dydžio keitimo metodo, „Lightgallery.js“ naudoja tik CSS metodą, kad būtų galima keisti dydį, todėl jis yra daug greitesnis ir lankstesnis. Tiesiog atnaujindami savo galerijos SASS kintamuosius galite lengvai pritaikyti papildinį pagal savo poreikius.
Kurkite miniatiūras naudodami nemokamą JavaScript API
Kalbant apie miniatiūras, Lightgallery.js leidžia įjungti animuotas miniatiūras, kaip ir „YouTube“, kad būtų modernesnis jausmas. Animuotas miniatiūras taip pat galima suaktyvinti „YouTube“ arba „Vimeo“ galerijoje. „Lightgallery.js“ yra su daugiau nei 20 įskiepių animacijų, kurias galima naudoti kuriant gražias galerijas.
Sukurkite statinių miniatiūrų galeriją naudodami „JavaScript“.
lightGallery(document.getElementById('static-thumbnails'), {
animateThumb: false,
zoomFromOrigin: false,
allowMediaOverlap: true,
toggleThumb: true,
});
Tinkinkite miniatiūrų galerijos kūrimą naudodami „JavaScript“.
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,
});