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 :

<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/zoombox/zoombox.js"></script>

Appel de la feuille de style css :

<link href="js/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />

Lancement du plugin (appel de base) :

<script type="text/javascript">
jQuery(function($){
    $('a.zoombox').zoombox();
     
});
</script>

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

/* Classic link */
<a class="zoombox" href="http://www.ludikreation.com">Site ludiKreation</a>

/* You can group links into 'galleries' with the keyword zgallery{galleryname} */
<a class="zoombox zgallery1" href="Firstlink">Link</a>
<a class="zoombox zgallery1" href="SecondLink">Link</a>
<a class="zoombox zgallery1" href="ThirdLink">Link</a>
<a class="zoombox zgallery1" href="Fourthlink">Link</a>

/* You can also specify a with and a height */

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 :

$('a.zoombox').zoombox({
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 :

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…

Répondre à integration html maquette psd Annuler la réponse

Votre adresse e-mail ne sera pas publiée.