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 :
Appel de la feuille de style css :
Lancement du plugin (appel de base) :
jQuery(function($){
$('a.zoombox').zoombox();
});
</script>
Puis les éléments html qui seront visés par le plugin :
<a href="http://www.ludikreation.com" class="zoombox">Site ludiKreation</a>
/* You can group links into 'galleries' with the keyword zgallery{galleryname} */
<a href="Firstlink" class="zoombox zgallery1">Link</a>
<a href="SecondLink" class="zoombox zgallery1">Link</a>
<a href="ThirdLink" class="zoombox zgallery1">Link</a>
<a href="Fourthlink" class="zoombox zgallery1">Link</a>
/* You can also specify a with and a height */
<a href="VideoLink" class="zoombox w500 h400"/>
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 :
theme : 'zoombox', //available themes : zoombox,lightbox, prettyphoto, darkprettyphoto, simple
opacity : 0.8, // Black overlay opacity
duration : 800, // Animation duration
animation : true, // Do we have to animate the box ?
width : 600, // Default width
height : 400, // Default height
gallery : true, // Allow gallery thumb view
autoplay : false // Autoplay for video
});
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 :
- 50 Plugins jQuery pour vos sites web !
- pp3Diso – Plugin jQuery – l’affichage et la gestion d’une carte 2D isométrique
- jPages – Plugin jQuery – Pagination à effet pour vos sites web
- DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
- Glisse – Plugin jQuery – Faites défiler vos images
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
[...] Tiny CirleSlider Flux Slider Zoombox jQuery Favicon Notifier jCoverflip s3Slider Chocolat Glisse Skitter Easy Image Zoom Zoomy Cycle [...]