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.
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 :
22 janvier 2015
Merci pour ce guide qui montre où insérer l’appel de zoombox dans javascript.