Opret Responsive and Beautiful Full-page Lightbox med BaguetteBox.js

Der er snesevis af lightbox plugins og de er alle gode af forskellige grunde. Nogle arbejder bedre på porteføljesider, mens andre er bedst til lydhørige layouter.

Men en af ​​mine foretrukne nye plugins at bruge er baguetteBox.js, skabt af JavaScript-udvikleren Marek Grzybek.

Selvfølgelig er dette plugin helt gratis at bruge og åbnes på GitHub, hvis du vil grave ind i koden manuelt.

Biblioteket har ingen afhængigheder, så du kan køre den uden jQuery, Zepto eller noget andet. Det er en rent JavaScript-bibliotek med en rigtig enkel opsætning.

Det er meningen at arbejde perfekt på mobile enheder, så det kan understøtte swipes og kraner, sammen med standard opførsel på desktops og laptops. Det er en af ​​de få fuldskærm gallerier, der understøtter mobile interaktioner sammen med en fuld modal effekt.

Tjek den demo side at se det leve i aktion. Det har et fuldt udstyret galleri sammen med En kode kode er nødvendig for at få det til at fungere:

 baguetteBox.run ( 'baguetteBoxOne'); 

Så dette mål et containerelement med klassen .baguetteBoxOne og hele galleriet fungerer derfra.

Du kunne Indstil brugerdefinerede indstillinger hvis du ønsker ting som billedtekster, knapper, preload-funktioner og tilbagekaldelsesmetoder til onclick / onchange-arrangementer. Alle disse muligheder er veldokumenteret på GitHub hvis du vil dykke ind.

Men det tager virkelig ikke meget at få det til at gå ud over et containerelement og nogle grundlæggende billedelementer.

Du har fuld kontrol over animationer, billedstørrelser, swipe effekter og galleri indhold som titler / billedtekster. Dette kræver JavaScript, så det har ikke et rent CSS-alternativ til modal. Men da de fleste browsere understøtter JavaScript, bør det ikke være et problem.

For at lære mere, besøg baguetteBox.js hovedside, og du kan også dele dine tanker med skaberen på Twitter @feimosi.