Vytvorte odozvu a krásnu celú stránku Lightbox s BaguetteBox.js

Existujú desiatky pluginov lightbox a všetci sú skvelí z rôznych dôvodov. Niektoré pracujú lepšie na portfóliových stránkach, zatiaľ čo iné sú najlepšie pre uspokojivé usporiadanie.

Ale jeden z mojich najobľúbenejších pluginov na použitie je baguetteBox.js, vytvorený vývojárom jazyka JavaScript Marek Grzybek.

Samozrejme, tento doplnok je úplne zadarmo na použitie a je otvorený na GitHub, ak chcete manuálne kopírovať kód.

Knižnica nemá žiadne závislosti, takže ho môžete spustiť bez jQuery, Zepto alebo iného. Je to čistá knižnica JavaScript s naozaj jednoduchým nastavením.

Je to myslené pracujú perfektne na mobilných zariadeniach, takže to môže podporovať swipes a kohútiky, spolu s predvoleným správaním na stolných počítačoch a notebookoch. Je to jedna z mála galérií na celej obrazovke podporujú mobilné interakcie spolu s plným modálnym efektom.

Pozrite sa na stránku demo stránka vidieť to žiť v akcii. Má plne vybavený galériu, spolu s jeden riadok kódu potrebný na to, aby fungoval:

 baguetteBox.run ( 'baguetteBoxOne'); 

Takže toto zacieľuje prvok kontajnera s triedou .baguetteBoxOne a celá galéria to funguje.

Mohol by si nastavte vlastné možnosti ak chcete veci ako titulky, štýly tlačidiel, funkcie predbežného načítania a metódy spätného volania pre udalosti onclick / onchange. Všetky tieto možnosti sú dobre zdokumentované na GitHub ak sa chcete ponoriť.

Ale to naozaj netrvá veľa, aby sa to stalo za kontajnerovým prvkom a niektorými základnými obrazovými prvkami.

vy mať plnú kontrolu cez animácie, veľkosti obrázkov, efektov prstov a obsahu galérie, ako sú názvy / titulky. toto vyžaduje JavaScript, takže nemá žiadnu CSS alternatívu k modal. Ale keďže väčšina prehliadačov podporuje JavaScript, nemala by to byť problém.

Ak sa chcete dozvedieť viac, navštívte hlavnú stránku baguetteBox.js a môžete tiež zdieľať svoje myšlienky s tvorcom na Twitter @ feimosi.