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

  • Mousse

    Très pratique ! Merci !

  • hugo

    Bonjour,
    pouvez vous me faire parvenir un page html simple afin que je puisse comprendre comment l’intégrer, j’ai beau essayer, je n’y arrive pas.

  • Delphine

    Bonjour. J’ai beau essayer en suivant les instructions, je n’arrive pas à l’installer. Serait-il possible d’avoir une page d’index fonctionnelle afin que je puisse voir mes erreurs ? Merci !

  • woodboy

    Bonjour,

    J’ai convenablement repris tout le code, et cela fonctionne à merveille.

    Le slide jouant en background, j’aurais aimé ajouter une fonction onmouseover pour les boutons de mon menu. A chaque survol de ma souris sur un bouton, le background ne montrerait plus le slide mais une autre image fixe.

    Comment puis-je faire? est-ce juste une histoire de z-index?
    j’ai essayé mon action onmouseover de ce type

    lien

    Je vois mon image fixe en survolant le bouton juste dans le petit temps de téléchargement du slide.
    Je m’en remets à vous, bien désarmé!
    merçi. woodboy

    • Il faut utiliser les fonctions de callback comme ‘prev’ (précédent), ‘next’ (suivant) et ‘jump’ (saut à la slide x) :
      https://github.com/jaysalvat/vegas/blob/master/src/jquery.vegas.js

      Par exemple, pour des boutons précédent et suivant, cela donne (il te faut l’adapter avec onmouseover et la fonction de callback jump) :
      $(‘#next’).click(function() {
      $.vegas(‘next’);
      });
      $(‘#prev’).click(function() {
      $.vegas(‘previous’);
      });

  • Khalil Khamlichi

    Quelles sont les types de transitions possibles ? a part « fade » ?
    merci d’avance.

    • Comme indiqué dans ce billet, il y a une seule et unique transition de type fade.

  • Stéphane

    comment peut-on integrer ceci dans un theme joomla?

  • Clément

    Bonjour,

    J’ai un petit problème concernant le « fade ».
    Mes images s’affichent et changent mais la transition se fait quasi instantanée.
    L’effet de fondue ne fonctionne pas, sachant qu’il est présent dans mon code.

    Si quelqu’un peut m’aider, ça serait sympa :)

    • Tu as sans doute oublié de définir le « fade » dans la définition des backgrounds :

      backgrounds:[
      { src:’/img/bg1.jpg’, fade:1000 },
      { src:’/img/bg2.jpg’, fade:1000 },
      { src:’/img/bg3.jpg’, fade:1000 }
      ]

      • Clément

        Bonsoir Pierre,
        Merci de m’avoir répondu.
        Le fade est bien défini à cet endroit et pourtant cela ne fonctionne pas.

        • Effectivement. Est-ce-que ton code est disponible en ligne pour que j’y jette un oeil ?

          • Clément

            Non il n’est pas en ligne, comment dois-je procéder?

          • Je t’ai mis un exemple sur JSFiddle avec transitions fade :
            http://jsfiddle.net/7Qkrp/20/

          • Clément

            par MP c’est possible que je puisse t’envoyer le dossier?

          • Oui : megaptery [ at ] gmail . com

  • prescillia

    Super merci ! J’avais trouvé la version anglaise et j’étais un peu perdu merci beaucoup !

  • B-etienne

    Bonjour,

    Merci pour ces informations.
    Je cherche à intégrer Vegas dans une div d’un stylesheet css. Est-ce possible ?
    A savoir que pour le moment mon background est une image fixe dans une div.

    Si vous avez une idée … merci beaucoup

    E.

    • Tu mélanges tout ! Tu ne peux pas faire de HTML ou de JS dans un fichier CSS ^^

  • Tuvron

    Bonjour,
    Plugin très sympa. J’ai 2 questions :
    – est-il possible de fixer une hauteur max pour pouvoir insérer du texte en dessous du background par exemple ?
    – peut-on insérer un lien par image du background pour que l’on puisse cliquer comme sur un carrousel ?
    Merci d’avance pour vos réponses.

    • Oui, les deux sont possibles.

      • Tuvron

        Super nouvelle ! Et comment procéder ? :)

        • Pas sûr que l’on puisse mettre un lien par image étant donné que la structure des images est à saisir dans la config JS. En revanche, pour la hauteur max, il suffit de mettre du CSS (par exemple enlever la position fixed et mettre une hauteur) sur la div #vegas. C’est un slider à mettre en fond, donc pas il n’y a pas d’intérêt de l’utiliser pour forcer des dimensions fixes et y mettre des liens ; mieux vaut partir sur un autre plugin.

          • Tuvron

            Merci pour votre réponse.
            Oui c’est ce que j’ai fait, j’ai trouvé un autre plugin, sensiblement similaire à celui ci en terme de rendu et qui a fait mon bonheur. Je ne sais pas si ça se fait, mais je peux mettre le lien pour votre communauté si vous voulez.

  • cactuszeus

    Hello,

    j’adore ce plug-in. Je me disais cependant qu’ un léger zoom en « ease-in » sur chaque photo serait aussi du plus bel effet pendant le slideshow… Mais comme je code comme un gastéropode sous extasy, je place cette idée dans des main plus expertes….

    autre slideshow avec cet effet: http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index4.html

    voili voilou merki.

  • Fabrice

    Bonjour,
    j’essai d’intégrer le plugin sur mon site mais sans résultat, rien ne s’affiche. je dois mal m’y prendre.
    pourriez vous me dire ou j’ai fais erreur ?

    voici mon code :

    Document sans nom

    $( function() {
    $.vegas(‘slideshow’, {
    delay:2000,
    backgrounds:[
    { src:’/images/aujourdhui.jpg’, fade:1000 },
    { src:’/images/hier.jpg’, fade:1000 },
    { src:’/images/autrefois.jpg’, fade:1000 }
    ]
    })(‘overlay’, {
    src:’/vegas/overlays/11.png’
    });
    });

  • Fabrice

    Bonjour, avez vous un exemple en ligne. je n’arrive toujours pas à faire fonctionner le code. (voir message ci dessous) HELP !!!!

  • Laetitia

    Bonjour, est-il possible de faire défiler un texte pour chaque photo ? (une légende par exemple ?