Vytvořit citlivý a krásný celostránkový Lightbox s BaguetteBox.js

Existují desítky pluginů lightbox a všichni jsou skvělí z různých důvodů. Někteří pracují lépe na stránkách portfolia, zatímco jiní jsou nejlepší pro citlivé rozložení.

Ale jeden z mých oblíbených nových pluginů k použití je baguetteBox.js, vytvořil vývojář JavaScriptu Marek Grzybek.

Samozřejmě, že tento plugin je zcela zdarma k použití a otevřený-source na GitHub, pokud chcete kopírovat do kódu ručně \ t.

Knihovna nemá žádné závislosti, takže jej můžete spustit bez jQuery, Zepto, nebo cokoliv jiného. To je čistá JavaScript knihovna s opravdu jednoduchým nastavením.

Má to být dokonale pracují na mobilních zařízeních, tak to může podporovat swipes a kohoutky, spolu s výchozím chováním na desktopy a notebooky. Je to jedna z mála galerií na celé obrazovce podporovat mobilní interakce spolu s plným modálním efektem.

Podívejte se na demo stránka vidět to žít v akci. Má plně vybavený galerii, spolu s jeden řádek kódu potřebný pro jeho fungování:

 baguetteBox.run ('. baguetteBoxOne'); 

Takže tohle cílí na prvek kontejneru s třídou .baguetteBoxOne a celá galerie funguje.

Mohl bys nastavit vlastní volby pokud si přejete věci, jako jsou titulky, styly tlačítek, funkce preload a metody zpětného volání pro události onclick / onchange. Všechny tyto možnosti jsou dobře zdokumentované na GitHub pokud se chceš potápět.

Ale to opravdu není moc, aby si to jít nad rámec kontejneru prvek a některé základní obrazové prvky.

Vy mít plnou kontrolu přes animace, velikosti obrázků, efekty posunutí a obsah galerie, například tituly / titulky. Tento nevyžaduje JavaScript, tak to nemá čistou CSS alternativu k modálnímu. Ale protože většina prohlížečů podporuje JavaScript, neměl by to být problém.

Chcete-li se dozvědět více, navštivte hlavní stránku baguetteBox.js a své myšlenky můžete také sdílet s tvůrcem na Twitteru @feimosi.