Maak een responsieve en mooie Full-page lightbox met BaguetteBox.js

Er zijn tientallen lightbox-plug-ins en ze zijn allemaal geweldig Voor verschillende redenen. Sommige werken beter op portfoliosites, terwijl andere het beste zijn voor responsieve lay-outs.

Maar een van mijn favoriete nieuwe plug-ins om te gebruiken is baguetteBox.js, gemaakt door JavaScript-ontwikkelaar Marek Grzybek.

Natuurlijk is deze plug-in volledig gratis te gebruiken en open source op GitHub als je de code handmatig wilt induiken.

De bibliotheek heeft geen afhankelijkheden, zodat je het kunt uitvoeren zonder jQuery, Zepto of iets anders. Het is een pure JavaScript-bibliotheek met een heel eenvoudige installatie.

Het is de bedoeling werkt perfect op mobiele apparaten, dus het kan swipes en taps ondersteunen, samen met het standaardgedrag op desktops en laptops. Het is een van de weinige galerieën op volledig scherm ondersteuning van mobiele interacties, samen met een volledig modaal effect.

Bekijk de demopagina om het live in actie te zien. Het heeft een volledig uitgeruste galerij, samen met de een regel code die nodig is om het werkend te krijgen:

 baguetteBox.run ( 'baguetteBoxOne'); 

Dus dit target een container-element met de klasse .baguetteBoxOne en de hele galerij werkt daar vanaf.

Je zou kunnen stel aangepaste opties in als u dingen zoals onderschriften, knopstijlen, preload-functies en callback-methoden wilt voor onclick / onchange-evenementen. Al deze opties zijn goed gedocumenteerd op GitHub als je erin wilt duiken.

Maar het kost echt niet veel om dit voorbij een containerelement en enkele basisbeeldelementen te krijgen.

U volledige controle hebben over de animaties, afbeeldingsgrootten, veegeffecten en galerijinhoud zoals titels / bijschriften. Deze vereist JavaScript, dus het heeft geen puur CSS-alternatief voor het modale. Maar aangezien de meeste browsers JavaScript ondersteunen, zou het geen probleem moeten zijn.

Ga voor meer informatie naar de baguetteBox.js hoofdpagina en je kunt ook je gedachten delen met de maker op Twitter @feimosi.