Lightcase.js une belle lightbox flexible et responsive, en jQuery

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>

 

 

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 !

Author: Franck Pertegas

Share This Post On

Submit a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *