Posted By Franck Pertegas on 27 Fév 2017 in Le Blog | 1 comment

Aujourd’hui je vous présente Lightcase.js, une jolie lightbox écrite en jQuery, qui est très flexible et surtout responsive.

Ce plugin jQuery est aussi, très bien maintenu par son auteur (@cornelboppart), libre et open source, sous licence GPL.

Qu’est ce Lightcase.js exactement ?

Lightbox est responsive et basé sur jQuery et SASS , c’est un plugin puissant et flexible pour les navigateurs web et mobiles. Il utilise css3 et toutes les transitions. Le plugin supporte tous les navigateurs récents : Google Chrome, Mozilla Firefox, Opera, Internet Explorer 9+ et plus.

Comment utiliser ce plugin ?

Tout d’abord, il faut télécharger les sources : http://cornel.bopp-art.com/lightcase/#download

Et les installer sur votre serveur.

Ensuite on doit charger les librairies utilisées et le css :

[pastacode lang= »markup » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.10.2%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%20href%3D%22path%2Fto%2Flightcase.css%22%3E%0A%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22path%2Fto%2Flightcase.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Créer un lien html vers l’image souhaitée :

[pastacode lang= »markup » manual= »%3Ca%20href%3D%22path%2Fto%2Fmedia.jpg%22%20data-rel%3D%22lightcase%22%3EYour%20link%20description%20or%20thumb%3C%2Fa%3E » message= » » highlight= » » provider= »manual »/]

Puis lancer le script jQuery :

[pastacode lang= »javascript » manual= »%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%09jQuery(document).ready(function(%24)%20%7B%0A%20%20%20%20%09%09%24(‘a%5Bdata-rel%5E%3Dlightcase%5D’).lightcase()%3B%0A%20%20%20%20%09%7D)%3B%0A%20%20%20%20%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Voilà pour l’utilisation basique de ce plugin jQuery, il suffit d’ajouter un attribut « data-rel » à votre élément déclencheur, puis d’appeler la méthode lightcase via jQuery.

Il existe plusieurs options et possibilités. De la collection d’éléments à l’affichage de vidéos dans la lightbox, c’est d’une grande flexibilité (mais ça je vous l’ai déjà dit, non ? :)).

Par exemple, pour mettre un titre à l’ouverture de la lightbox, c’est simple, il suffit de remplir l’attribut « title » :

[pastacode lang= »markup » manual= »%3Ca%20href%3D%22path%2Fto%2Fmedia.jpg%22%20data-rel%3D%22lightcase%22%20title%3D%22Your%20title%22%3EYour%20link%20description%20or%20thumb%3C%2Fa%3E » message= » » highlight= » » provider= »manual »/]

• Retrouver toutes les options possibles, sur la documentation ici : http://cornel.bopp-art.com/lightcase/documentation
• Et pour mieux comprendre ce qu’apporte ce plugin jQuery, voici un lien vers la démo : http://cornel.bopp-art.com/lightcase/#demo

Bon code à tous ! En espérant que ce plugin vous aide, et si vous avez d’autres outils de ce type à nous présenter, n’hésitez pas !