Lag Responsive og Beautiful Full-Page Lightbox med BaguetteBox.js

Det er dusinvis av lightbox plugins og de er alle gode av forskjellige grunner. Noen jobber bedre på porteføljesider, mens andre er best for responsive layouter.

Men, en av mine favoritt nye plugins å bruke er baguetteBox.js, skapt av JavaScript-utvikleren Marek Grzybek.

Selvfølgelig er dette pluginet helt gratis å bruke og åpnes på GitHub hvis du vil grave inn koden manuelt.

Biblioteket har ingen avhengigheter, så du kan kjøre den uten jQuery, Zepto, eller noe annet. Det er en rent JavaScript-bibliotek med et veldig enkelt oppsett.

Det er ment å jobbe perfekt på mobile enheter, så det kan støtte swipes og kraner, sammen med standard oppførsel på stasjonære og bærbare datamaskiner. Det er en av de få fullskjerms galleriene som støtter mobile interaksjoner, sammen med en full modal effekt.

Sjekk ut demo side for å se det leve i aksjon. Den har et fullt utstyrt galleri, sammen med En linje med kode som kreves for å få det til å fungere:

 baguetteBox.run ( 'baguetteBoxOne'); 

Så dette målretter mot et beholderelement med klassen .baguetteBoxOne og hele galleriet fungerer av det.

Du kan sett tilpassede alternativer Hvis du ønsker ting som bildetekster, knappestiler, forhåndsbelastningsfunksjoner og tilbakeringingsmetoder for onclick / onchange-hendelser. Alle disse alternativene er godt dokumentert på GitHub hvis du vil dykke inn.

Men det tar egentlig ikke mye å få dette til å gå utover et beholderelement og noen grunnleggende bildeelementer.

Du ha full kontroll over animasjonene, bildestørrelsene, swipe-effekter og galleriinnhold som titler / bildetekster. Dette krever JavaScript, så det har ikke et rent CSS-alternativ til modal. Men siden de fleste nettlesere støtter JavaScript, burde det ikke være et problem.

For å lære mer, besøk baguetteBox.js hovedside, og du kan også dele tankene dine med skaperen på Twitter @feimosi.