Chocolat – plugin jQuery – La visionneuse d’image pratique

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 :

[pastacode lang= »markup » manual= »%3Clink%20rel%3D%22stylesheet%22%20href%3D%22css%2Fchocolat.css%22%20%2F%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery.chocolat.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »markup » manual= »%3Ca%20title%3D%22L%C3%A9gende%20de%20l’image%201%22%20href%3D%22series%2F1.jpg%22%20rel%3D%22Titre%20de%20la%20s%C3%A9rie%22%3E%3Cimg%20src%3D%22series%2Fmini%2F1.jpg%22%20width%3D%22100%22%20%2F%3E%3C%2Fa%3E%0A%3Ca%20title%3D%22L%C3%A9gende%20de%20l’image%202%22%20href%3D%22series%2F2.jpg%22%3E%3Cimg%20src%3D%22series%2Fmini%2F2.jpg%22%20width%3D%22100%22%20%2F%3E%3C%2Fa%3E%0A%3Ca%20title%3D%22L%C3%A9gende%20de%20l’image%203%22%20href%3D%22series%2F3.jpg%22%3E%3Cimg%20src%3D%22series%2Fmini%2F3.jpg%22%20width%3D%22100%22%20%2F%3E%3C%2Fa%3E » message= » » highlight= » » provider= »manual »/]

Puis la mise en marche du plugin :

[pastacode lang= »javascript » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20charset%3D%22utf-8%22%3E%0A%20%24(document).ready(function()%7B%0A%20%20%20%20%24(function()%20%7B%0A%20%20%20%20%20%20%20%20%24(‘a’).Chocolat()%3B%0A%20%20%20%20%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

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 :

[pastacode lang= »apacheconf » manual= »container%20%3A%0AD%C3%A9finit%20si%20l’interface%20chocolat%20va%20s’ouvrir%20et%20occuper%20toute%20la%20page%20(par%20defaut)%2C%20ou%20si%20elle%20doit%20s’ouvrir%20dans%20un%20bloc%20particulier%20de%20la%20page.%20(facultatif)%0A%0AdisplayAsALink%20%3A%0APermet%20de%20regrouper%20les%20images%20sous%20un%20seul%20lien%20(true)%20ou%20de%20laisser%20le%20html%20tel%20quel%20(pour%20laisser%20des%20miniatures%20apparentes%20par%20exemple)%20(false%20%3A%20par%20defaut).%20(facultatif)%0A%0AlinkImages%20%3A%0AD%C3%A9finit%20si%20l’on%20peut%20passer%20d’une%20image%20%C3%A0%20l’autre%20sans%20fermer%20la%20visionneuse%20(true%20%3A%20par%20defaut)%2C%20ou%20si%20les%20images%20restent%20ind%C3%A9pendantes.%20(facultatif)%0A%0AoverlayOpacity%2C%20overlayColor%20%3A%0APermettent%20de%20d%C3%A9finir%20l’opacit%C3%A9%20et%20la%20couleur%20du%20fond.%20(facultatif)%0A%0AlinksContainer%20%3A%0APermet%20de%20d%C3%A9finir%20l’%C3%A9l%C3%A9ment%20qui%20contiendra%20le%20lien%20vers%20la%20s%C3%A9rie%20si%20displayAsALink%20vaut%20true%20(facultatif). » message= » » highlight= » » provider= »manual »/]

 

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 :

Author: Franck Pertegas

Share This Post On

2 Comments

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

    Post a Reply
  2. 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.

    Post a Reply

Trackbacks/Pingbacks

  1. Chocolat – plugin jQuery – La visionneuse d’image pratique | LudiBlog | Développement Web et sites | Scoop.it - [...] jQuery("#errors*").hide(); window.location= data.themeInternalUrl; } }); } blog.ludikreation.com - Today, 5:11 [...]
  2. Retour progressif des articles sur LudiBlog | LudiBlog - [...] Chocolat – plugin jQuery – La visionneuse d’image pratique [...]
  3. DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace | LudiBlog - [...] Chocolat – plugin jQuery – La visionneuse d’image pratique [...]
  4. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] Tiny CirleSlider Flux Slider Zoombox jQuery Favicon Notifier jCoverflip s3Slider Chocolat Glisse Skitter Easy Image Zoom Zoomy Cycle Sponsor…

Submit a Comment

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