Izveidojiet atsaucīgu un skaistu Full-page Lightbox ar BaguetteBox.js

Tur ir desmitiem gaismas kastu spraudņu un viņi visi ir lieliski dažādu iemeslu dēļ. Daži strādā labāk portfeļa vietnēs, bet citi ir vislabāk piemēroti atsaucīgiem izkārtojumiem.

Bet viens no maniem iecienītākajiem jaunajiem spraudņiem ir baguetteBox.js, izveidojis JavaScript izstrādātājs Marek Grzybek.

Protams, šis spraudnis ir pilnīgi brīvi lietojams un atvērts no GitHub, ja vēlaties manuāli ienest kodu.

Bibliotēka nav nekādu atkarību, lai to varētu palaist bez jQuery, Zepto vai kaut kas cits. Tas ir tīra JavaScript bibliotēka ar ļoti vienkāršu iestatīšanu.

Tas ir domāts darbojas perfekti uz mobilajām ierīcēm, lai tā varētu atbalstīt swipes un krānus, kā arī noklusējuma uzvedību uz galddatoriem un klēpjdatoriem. Tā ir viena no nedaudzajām pilnekrāna galerijām atbalstīt mobilās mijiedarbības, kā arī pilnīgu modālo efektu.

Pārbaudiet demonstrācijas lapa lai redzētu to dzīvot darbībā. Tai ir pilna Featured galerija, kā arī viens kods, kas nepieciešams, lai to iegūtu:

 baguetteBox.run ('. baguetteBoxOne'); 

Tātad, tas mērķa konteinera elementu ar klasi .baguetteBoxOne un visa galerija strādā pie tā.

Tu varētu iestatīt pielāgotas opcijas ja vēlaties, lai notikumi, piemēram, paraksti, pogu stili, ielādēšanas funkcijas un atzvanīšanas metodes, tiktu izmantoti notikumiem, kas saistīti ar klāstu / apmaiņu. Visas šīs iespējas ir labi dokumentēts GitHub ja vēlaties ienirt.

Bet, tas tiešām neņem daudz, lai to panāktu ārpus konteinera elementa un dažiem pamata attēlu elementiem.

Jūs pilnībā kontrolēt animācijas, attēlu izmērus, zvēliens efektus un galerijas saturu, piemēram, virsrakstus / parakstus. Tas neprasa JavaScript, tā nav tīra CSS alternatīva modālam. Bet, tā kā lielākā daļa pārlūkprogrammu atbalsta JavaScript, tai nevajadzētu būt problēmai.

Lai uzzinātu vairāk, apmeklējiet baguetteBox.js galveno lapu, un jūs varat arī dalīties savās domās ar veidotāju pakalpojumā Twitter @feimosi.