Skapa Responsive och Beautiful Full-page Lightbox med BaguetteBox.js

Det finns dussintals ljuskälla plugins och de är alla stora av olika skäl. Vissa fungerar bättre på portföljplatser medan andra är bäst för responsiva layouter.

Men en av mina favorit nya plugins att använda är baguetteBox.js, skapad av JavaScript-utvecklaren Marek Grzybek.

Självklart är det här pluginet helt gratis att använda och öppet på GitHub om du vill gräva i koden manuellt.

Biblioteket har inga beroenden, så du kan köra den utan jQuery, Zepto eller något annat. Det är en rent JavaScript-bibliotek med en väldigt enkel installation.

Det är tänkt att fungerar perfekt på mobila enheter, så det kan stödja swipes och kranar, tillsammans med standardbeteendet på stationära och bärbara datorer. Det är en av de få fullskärms gallerierna som stödja mobila interaktioner, tillsammans med en fullständig modal effekt.

Kolla in demo sida för att se det leva i aktion. Den har ett fullt utrustad galleri, tillsammans med en rad kod som krävs för att få den att fungera:

 baguetteBox.run ( 'baguetteBoxOne'); 

Så det här riktar sig mot ett behållarelement med klassen .baguetteBoxOne och hela galleriet fungerar av det.

Du kunde Ange anpassade alternativ om du vill ha saker som texter, knappstilar, förinstalleringsfunktioner och återuppringningsmetoder för onclick / onchange-händelser. Alla dessa alternativ är väl dokumenterad på GitHub om du vill dyka in.

Men det tar inte mycket för att få detta att gå utöver ett behållarelement och några grundläggande bildelement.

Du ha full kontroll över animationer, bildstorlekar, svepseffekter och galleriinnehåll som titlar / bildtexter. Detta kräver JavaScript, så det har inte ett rent CSS-alternativ till modal. Men eftersom de flesta webbläsare stöder JavaScript, borde det inte vara ett problem.

För att lära dig mer, gå till baguetteBox.js huvudsida och du kan också dela dina tankar med skaparen på Twitter @feimosi.