Ustvarite odzivno in lepo polno stran Lightbox z BaguetteBox.js

Obstajajo desetine dodatkov za Lightbox in vsi so super iz različnih razlogov. Nekateri delujejo bolje na spletnih straneh portfelja, medtem ko so drugi najboljši za odzivne postavitve.

Ampak, eden od mojih najljubših novih plugins za uporabo je baguetteBox.js, ustvaril razvijalec JavaScripta Marek Grzybek.

Seveda je ta vtičnik popolnoma brezplačen za uporabo in je odprt na GitHub, če želite ročno kopati v kodo ročno.

Knjižnica nima nobenih odvisnosti, tako da ga lahko zaženete brez jQuery, Zepto ali karkoli drugega. Je čista JavaScript knjižnica z zelo preprosto nastavitvijo.

Namenjeno je odlično delujejo na mobilnih napravah, tako da lahko podpira swipes in pipe, skupaj s privzetim obnašanjem na namiznih in prenosnih računalnikih. To je ena izmed redkih galerij s celim zaslonom podpirajo mobilne interakcije, skupaj s popolnim učinkom na način.

Oglejte si demo stran da bi videl, da živi v akciji. Ima popolnoma opremljeno galerijo, skupaj z ena vrstica kode, ki jo potrebuje, da deluje:

 baguetteBox.run ('baguetteBoxOne'); 

Torej, to cilje na element vsebnika z razredom .baguetteBoxOne in celotna galerija deluje na to.

Lahko bi nastavite možnosti po meri če želite za stvari, kot so napisi, slogi gumbov, funkcije prednameščanja in metode povratnega klica za dogodke onclick / onchange. Vse te možnosti so dobro dokumentirana na GitHubu če se želite potopiti.

Ampak, res ne potrebuje veliko, da bi to preseglo element vsebnika in nekaj osnovnih elementov slike.

Ti imajo popoln nadzor nad animacijami, velikostmi slik, udarnimi učinki in vsebino galerije, kot so naslovi / napisi. To zahteva JavaScript, zato nima čiste CSS alternative za modal. Ker pa večina brskalnikov podpira JavaScript, to ne bi smelo biti problem.

Če želite izvedeti več, obiščite glavno stran baguetteBox.js in svoje misli lahko delite tudi z ustvarjalcem na Twitterju @feimosi.