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 :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="path/to/lightcase.css">
    <script type="text/javascript" src="path/to/lightcase.js"></script>

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

<a href="path/to/media.jpg" data-rel="lightcase">Your link description or thumb</a>

Puis lancer le script jQuery :

    <script type="text/javascript">
    	jQuery(document).ready(function($) {
    		$('a[data-rel^=lightcase]').lightcase();
    	});
    </script>

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 » :

<a href="path/to/media.jpg" data-rel="lightcase" title="Your title">Your link description or thumb</a>

• 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 !