Vegas, un slideshow / background fullscreen avec jQuery

14 novembre 2012

Vegas est un plugin jQuery qui permet de mettre en place un système de background « fullscreen » pouvant faire office de slideshow. Facile à mettre en place, ce plugin génère des arrières-plans dynamiques et étirables, quelle que soit la résolution d’écran.

Un background dynamique

Conçu par Jay Salvat, développeur français reconnu pour ses travaux JS de qualité (en autres Buzz et markItUp!), Vegas s’intègre rapidement sur n’importe quel webdesign. Il est possible de l’utiliser aussi bien comme background fixe que comme slideshow « fullscreen » avec images de fond qui défilent, le tout avec une bonne compatibilité navigateur (IE7+).

Le plugin est accompagné de plusieurs paramètres qui permettent de configurer facilement le comportement de l’arrière-plan : alignement horizontal et vertical de l’image par rapport à la fenêtre, redimensionnement automatique (responsive), superposition d’un overlay, délai entre deux slides et durée de transition (uniquement de type fade), fonctions de callback… Bref, un plugin assez complet.

Mise en place de Vegas

On commence par inclure les dépendances : le framework jQuery, ainsi que le plugin Vegas (fichier JS et feuille de style).

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/vegas/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css" />

Ensuite, tout se configure dans l’appel du plugin. Pas besoin de définir une structure HTML. Par exemple, voici comment mettre en place un simple background avec un overlay (à noter qu’il est recommandé de récupérer les overlays du plugin sur son serveur). Ici, aucun paramètre n’est utilisé ; des valeurs par défaut sont donc appliquées par Vegas :

$( function() {
   $.vegas({
      src:'/images/background.jpg'
   })('overlay', {
      src:'/vegas/overlays/13.png'
   });
});

Si vous souhaitez définir un slideshow, il faut définir plusieurs images dans le paramètre backgrounds. On peut également ajouter plusieurs paramètres comme la durée entre deux slides (delay) et la durée de transition de chaque image (fade) :

$( function() {
   $.vegas('slideshow', {
      delay:2000,
      backgrounds:[
         { src:'/img/bg1.jpg', fade:1000 },
         { src:'/img/bg2.jpg', fade:1000 },
         { src:'/img/bg3.jpg', fade:1000 }
      ]
   })('overlay', {
      src:'/vegas/overlays/11.png'
   });
});

Vegas est donc un plugin jQuery très pratique pour installer rapidement un background « fullscreen » et dynamique qui s’adapte à n’importe quelle taille d’écran. Pour personnaliser davantage votre fond d’écran de site, vous pouvez aller faire un tour sur la documentation du plugin qui est assez complète et munie d’exemples.

Requis : jQuery
Compatibilité : Firefox, Chrome, Opera, Safari et Internet Explorer 7+
Démonstration : http://vegas.jaysalvat.com/
Licence : MIT/GPL

Commentaires