Zoombox – Plugin jQuery – Zoomez sur vos images

Ce n’est pas parce qu’on a déjà fait le tour de 50 plugins jQuery qu’il faut s’arrêter là, non ?

Aujourd’hui je vous présente une nouvelle création française en jQuery, c’est Zoombox. Un plugin jQuery qui va vous permettre de réaliser des effets lightbox sur vos images, photos, contenus, médias etc… sur vos sites web.

zoombox-jquery-plugin

Ce que l’on peut faire avec zoombox :

– permet d’intégrer dans les effets : Images, animations Flash, videos Youtube, videos Dailymotion, Iframe, contenu HTML
– le rendu est aisément customisable via le css
– il est possible de grouper les galeries
– il est possible de naviguer dans les galeries via les flèches du clavier et de fermer la box via le bouton esc
– etc…

Utilisation de Zoombox :

Intégration des librairies js, jquery et zoombox :

[pastacode lang= »markup » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fzoombox%2Fzoombox.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Appel de la feuille de style css :

[pastacode lang= »markup » manual= »%3Clink%20href%3D%22js%2Fzoombox%2Fzoombox.css%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%20media%3D%22screen%22%20%2F%3E » message= » » highlight= » » provider= »manual »/]

Lancement du plugin (appel de base) :

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

Puis les éléments html qui seront visés par le plugin :

[pastacode lang= »markup » manual= »%2F*%20Classic%20link%20*%2F%0A%3Ca%20class%3D%22zoombox%22%20href%3D%22http%3A%2F%2Fwww.ludikreation.com%22%3ESite%20ludiKreation%3C%2Fa%3E%0A%0A%2F*%20You%20can%20group%20links%20into%20’galleries’%20with%20the%20keyword%20zgallery%7Bgalleryname%7D%20*%2F%0A%3Ca%20class%3D%22zoombox%20zgallery1%22%20href%3D%22Firstlink%22%3ELink%3C%2Fa%3E%0A%3Ca%20class%3D%22zoombox%20zgallery1%22%20href%3D%22SecondLink%22%3ELink%3C%2Fa%3E%0A%3Ca%20class%3D%22zoombox%20zgallery1%22%20href%3D%22ThirdLink%22%3ELink%3C%2Fa%3E%0A%3Ca%20class%3D%22zoombox%20zgallery1%22%20href%3D%22Fourthlink%22%3ELink%3C%2Fa%3E%0A%0A%2F*%20You%20can%20also%20specify%20a%20with%20and%20a%20height%20*%2F » message= » » highlight= » » provider= »manual »/]

3 versions différentes dans cet exemple :
– Un lien de base
– Une galerie
– Et une vidéo

Il existe plusieurs options pour customiser et modifier l’affichage :

[pastacode lang= »javascript » manual= »%24(‘a.zoombox’).zoombox(%7B%0Atheme%20%3A%20’zoombox’%2C%20%2F%2Favailable%20themes%20%3A%20zoombox%2Clightbox%2C%20prettyphoto%2C%20darkprettyphoto%2C%20simple%0Aopacity%20%3A%200.8%2C%20%2F%2F%20Black%20overlay%20opacity%0Aduration%20%3A%20800%2C%20%2F%2F%20Animation%20duration%0Aanimation%20%3A%20true%2C%20%2F%2F%20Do%20we%20have%20to%20animate%20the%20box%20%3F%0Awidth%20%3A%20600%2C%20%2F%2F%20Default%20width%0Aheight%20%3A%20400%2C%20%2F%2F%20Default%20height%0Agallery%20%3A%20true%2C%20%2F%2F%20Allow%20gallery%20thumb%20view%0Aautoplay%20%3A%20false%20%2F%2F%20Autoplay%20for%20video%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]

En fait, l’auteur a réalisé une vidéo pour la mise en place du plugin. Pratique et sympa, non ?

Je vous la partage 😉


Présentation Zoombox V2 par Grafikart

Site du plugin
Télécharger le plugin
Documentation

Articles qui peuvent vous intéresser :

Author: Franck Pertegas

Share This Post On

1 Comment

Trackbacks/Pingbacks

  1. 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 [...]
  2. 62 plugins jQuery sur LudiBlog pour 2014 ! | LudiBlog - […] Hash Slider jQuery Simple Slider Tiny CirleSlider Flux Slider Zoombox jQuery Favicon Notifier jCoverflip s3Slider Chocolat Glisse Skitter Easy…

Submit a Comment

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