Napravite osjetljiv i lijep Full-page Lightbox s BaguetteBox.js

Tamo su desetaka dodataka za lightbox i svi su sjajni iz različitih razloga. Neki rade bolje na web stranicama portfelja, dok su drugi najbolji za odgovarajući izgled.

No, jedan od mojih omiljenih novih dodataka za korištenje je baguetteBox.js, stvorio JavaScript programer Marek Grzybek.

Naravno, ovaj dodatak je potpuno besplatan za korištenje i otvoren izvor na GitHubu ako želite ručno kopati u kod.

Knjižnica nema zavisnosti, tako da ga možete pokrenuti bez jQuery, Zepto, ili bilo čega drugog. To je čista JavaScript knjižnica s vrlo jednostavnim postavkama.

To je značilo savršeno funkcioniraju na mobilnim uređajima, tako da podržava swipes i slavine, kao i zadano ponašanje na stolnim i prijenosnim računalima. To je jedna od rijetkih galerija na cijelom zaslonu podržavaju mobilne interakcije, zajedno s punim modalnim učinkom.

Provjerite demo stranicu vidjeti kako živi u akciji. To je potpuno opremljena galerija, zajedno s jedan redak koda koji je potreban da bi se dobio:

 baguetteBox.run ( 'baguetteBoxOne'); 

Tako da je ovo cilja element kontejnera na klasu .baguetteBoxOne i cijela galerija djeluje na to.

Mogao bi postavite prilagođene opcije ako želite za stvari kao što su opisi, stilovi gumba, značajke predopterećenja i metode povratnog poziva za događaje onclick / onchange. Sve ove opcije su dobro dokumentirano na GitHubu ako želiš zaroniti.

Ali, stvarno ne treba mnogo da bi se ovo proširilo izvan kontejnerskog elementa i nekih osnovnih elemenata slike.

Vas imati potpunu kontrolu preko animacija, veličina slika, učinaka prijelaza i sadržaja galerije, kao što su naslovi / opisi. Ovaj zahtijeva JavaScript, tako da nema čistu CSS alternativu modalu. No, budući da većina preglednika podržava JavaScript, to ne bi trebalo biti problem.

Da biste saznali više, posjetite glavnu stranicu baguetteBox.js i svoje misli možete podijeliti s tvorcem na Twitteru @feimosi.