Créez une Lightbox pleine page sensible et attrayante avec BaguetteBox.js
Il y a des dizaines de plugins lightbox et ils sont tous géniaux pour des raisons différentes. Certains fonctionnent mieux sur les sites de portefeuille, tandis que d'autres conviennent mieux aux mises en page réactives..
Mais un de mes nouveaux plugins préférés à utiliser est baguetteBox.js, créé par le développeur JavaScript Marek Grzybek.
Bien sûr, ce plugin est totalement gratuit et utilisable en open source sur GitHub si vous voulez creuser manuellement le code.
La bibliothèque n'a pas de dépendances, vous pouvez donc l'exécuter sans jQuery, Zepto ou quoi que ce soit d'autre. C'est un bibliothèque JavaScript pure avec une configuration très simple.
C'est destiné à fonctionne parfaitement sur les appareils mobiles, il peut donc prendre en charge les balayages et les saisies, ainsi que le comportement par défaut sur les ordinateurs de bureau et portables. C’est l’une des rares galeries plein écran qui prend en charge les interactions mobiles, avec un effet modal complet.
Vérifiez page de démonstration pour le voir vivre en action. Il a une galerie entièrement équipée, avec le une ligne de code est nécessaire pour le faire fonctionner:
baguetteBox.run ('. baguetteBoxOne'); Donc ça cible un élément conteneur avec la classe .baguetteBoxOne et toute la galerie travaille que.
Vous pourriez définir des options personnalisées si vous souhaitez des éléments tels que des légendes, des styles de bouton, des fonctionnalités de préchargement et des méthodes de rappel pour les événements onclick / onchange. Toutes ces options sont bien documenté sur GitHub si vous voulez plonger dans.
Mais, cela ne prend vraiment pas beaucoup pour que cela dépasse un élément de conteneur et quelques éléments d'image de base.
Vous avoir le plein contrôle sur les animations, la taille des images, les effets de balayage et le contenu de la galerie tels que les titres / légendes. Ce nécessite JavaScript, il n’a donc pas d’alternative CSS pure au modal. Mais, puisque la plupart des navigateurs prennent en charge JavaScript, cela ne devrait pas être un problème.
Pour en savoir plus, visitez la page principale baguetteBox.js et partagez votre opinion avec le créateur sur Twitter @feimosi.
