Chocolat – plugin jQuery – La visionneuse d’image pratique

19 janvier 2012
Par

Je reviens de nouveau avec un plugin jQuery. Cette fois, c’est une réalisation française : Chocolat. Chocolat permet de visualiser une à plusieurs images sans quitter la page de votre site web. Le plugin jQuery laisse à l’utilisateur le choix de regrouper une série d’image sous un lien, ou de laisser apparaître les images sous forme de miniatures. Cette visionneuse peut apparaitre soit en pleine page, soit dans un bloc de la page.

chocolat-jquery-plugin-images

Utilisation du plugin :

Appel des librairies et fichiers js / css :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.chocolat.js"></script>
<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">

Création des éléments html qui seront touchés par le plugin :

<a href="series/1.jpg" rel="Titre de la série" title="Légende de l'image 1"><img width="100" src="series/mini/1.jpg" /></a>
<a href="series/2.jpg" title="Légende de l'image 2"><img width="100" src="series/mini/2.jpg" /></a>
<a href="series/3.jpg" title="Légende de l'image 3"><img width="100" src="series/mini/3.jpg"/></a>

Puis la mise en marche du plugin :

<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
    $(function() {
        $('a').Chocolat();
    });
});
</script>

Puis vous aurez tous vos liens qui seront affectés par le plugin jQuery Chocolat, au clic vous pourrez visionner vos images sans avoir à changer de page.

Il existe plusieurs options :

container :
Définit si l'interface chocolat va s'ouvrir et occuper toute la page (par defaut), ou si elle doit s'ouvrir dans un bloc particulier de la page. (facultatif)

displayAsALink :
Permet de regrouper les images sous un seul lien (true) ou de laisser le html tel quel (pour laisser des miniatures apparentes par exemple) (false : par defaut). (facultatif)

linkImages :
Définit si l'on peut passer d'une image à l'autre sans fermer la visionneuse (true : par defaut), ou si les images restent indépendantes. (facultatif)

overlayOpacity, overlayColor :
Permettent de définir l'opacité et la couleur du fond. (facultatif)

linksContainer :
Permet de définir l'élément qui contiendra le lien vers la série si displayAsALink vaut true (facultatif).

Pour plus d’information sur ce plugin, rendez vous sur la page officiel de Chocolat
Pour visualiser une démo, c’est par là

Articles qui peuvent vous intéresser :

Tags: , , , , , , , , ,

6 Responses to Chocolat – plugin jQuery – La visionneuse d’image pratique

  1. [...] jQuery("#errors*").hide(); window.location= data.themeInternalUrl; } }); } blog.ludikreation.com – Today, 5:11 [...]

  2. Yann on 20 janvier 2012 at 15 h 31 min

    Ne manque que la possibilité de passer automatiquement les images avec comme option le temps passé sur chaque image.

  3. Funkynews on 20 mars 2012 at 12 h 41 min

    Un plugin très simple et efficace, bien qu’on puisse facilement trouver mieux sur le net. Manque le mode auto et un ou deux effets, comme un fade.

  4. [...] Chocolat – plugin jQuery – La visionneuse d’image pratique [...]

  5. [...] Chocolat – plugin jQuery – La visionneuse d’image pratique [...]

  6. [...] Tiny CirleSlider Flux Slider Zoombox jQuery Favicon Notifier jCoverflip s3Slider Chocolat Glisse Skitter Easy Image Zoom Zoomy Cycle Sponsor Flip Wall Easy Gallery ColorBox MaxImage JLoupe [...]

Laisser un commentaire

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


*

Rubriques