Erstellen Sie responsive und schöne ganzseitige Lightbox mit BaguetteBox.js

Es gibt Dutzende von Lightbox-Plugins und sie sind alle großartig aus verschiedenen Gründen. Einige funktionieren besser auf Portfolio-Websites, während andere am besten für responsive Layouts geeignet sind.

Eines meiner beliebtesten neuen Plugins ist jedoch baguetteBox.js, erstellt vom JavaScript-Entwickler Marek Grzybek.

Natürlich ist dieses Plugin völlig frei und kann von GitHub verwendet werden, wenn Sie den Code manuell einlesen möchten.

Die Bibliothek hat keine Abhängigkeiten, Sie können es also ohne jQuery, Zepto oder irgendetwas anderes ausführen. Es ist ein reine JavaScript-Bibliothek mit einem wirklich einfachen Setup.

Es ist dazu bestimmt funktionieren perfekt auf mobilen Geräten, So können Wischvorgänge und Abgriffe zusammen mit dem Standardverhalten von Desktops und Laptops unterstützt werden. Es ist eine der wenigen Galerien im Vollbildmodus unterstützen mobile Interaktionen zusammen mit einem vollständigen modalen Effekt.

Besuche die Demo-Seite um es in Aktion zu sehen. Es hat eine voll ausgestattete Galerie, zusammen mit der Eine Codezeile ist erforderlich, damit es funktioniert:

 baguetteBox.run ('. baguetteBoxOne'); 

Also das zielt mit der Klasse auf ein Containerelement .baguetteBoxOne und die ganze Galerie arbeitet davon.

Du könntest Benutzerdefinierte Optionen festlegen wenn Sie beispielsweise Untertitel, Schaltflächenstile, Preload-Funktionen und Callback-Methoden für Onclick- / Onchange-Ereignisse wünschen. Alle diese Optionen sind auf GitHub gut dokumentiert wenn du eintauchen willst.

Es braucht jedoch nicht viel, um dies über ein Containerelement und einige grundlegende Bildelemente hinaus zu bringen.

Sie haben die volle Kontrolle über die Animationen, Bildgrößen, Swipe-Effekte und Galerie-Inhalte wie Titel / Beschriftungen. Diese erfordert JavaScript, Es gibt also keine reine CSS-Alternative zum Modal. Da die meisten Browser JavaScript unterstützen, sollte dies kein Problem darstellen.

Um mehr zu erfahren, besuchen Sie die baguetteBox.js-Hauptseite und Sie können Ihre Gedanken auch mit dem Ersteller auf Twitter @feimosi teilen.