Portfolio
Grâce à bgStretcher, vous pouvez mettre en background de vos pages un défilement d’images.
Qu’est ce que c’est bgStretcher ?
BgStretcher est un plug-in jQuery qui vous permet d’ajouter une image pleine page (ou un ensemble d’images) au fond de votre page web et de la (ou les) redimensionner proportionnellement. Le plugin fonctionne comme un diaporama : on peut y mettre plusieurs images, choisir l’effet désiré pour le changement d’image (fondu, …) et définir le temps entre chaque changement.
Il est compatible :
- MS Internet Explorer 6, 7, 8
- Mozilla Firefox 2, 3
- Opera 9+
- Apple Safari
- Google Chrome
Comment l’installer sur son site ?
- Téléchargez le script à cette adresse
- Collez le code suivant entre les balises <head>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../bgstretcher.js"></script>
<link rel="stylesheet" href="../bgstretcher.css" />
- Insérez ensuite ce bout de code pour initialiser le script en y personnalisant les options
<script type="text/javascript">
$(document).ready(function(){// Initialize Backgound Stretcher
$(document).bgStretcher({images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>
- Placez votre contenu par dessus le background dans votre feuille de style CSS
#contenu {z-index: 2;
position: relative;
}
Et c’est tout !
Les principales options
| Option | Valeur | Description |
|---|---|---|
| resizeProportionally | true | Indique si les images de fond seront redimensionnées de manière proportionnelle. |
| resizeAnimate | false | Indique su les images de fond seront redimensionnées de manière proportionnelle avec une animation. (Peut ramer si les images sont trop grandes) |
| imageWidth | 4 | Permet de définir le rapport hauteur/largeur pour le redimensionnement (il est possible d’indiquer aussi par exemple 1024). |
| imageHeight | 3 | Permet de définir le rapport hauteur/largeur pour le redimensionnement (il est possible d’indiquer aussi par exemple 768). |
| nextSlideDelay | 3000 (3 secondes) | Valeur en millisecondes avant le prochain changement d’image. |
Pour plus d’informations, vous pouvez visiter le site du plugin à cette adresse : http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html
SAlut ! Merci beaucoup pour ce magnifique plug-in, et qui plus est, gratuit !!
J’ai juste une petite question :
Comment peut-on changer le fond vert par défault que l’on voit quand ont resize rapidement la fenêtre du navigateur ?? Merci et bonne continuation.
Sylvain
As-tu essayé de mettre :
html {background-color: TA COULEUR;
}
dans ta CSS ?
le tuto est vraiment très bien; mais si nous voulons le mettre dans un div et non pas dans le body.
comment faire donc. merci
Pour cela il faut utiliser un autre type de diaporama, celui ci est spécifique pour être en plein écran. Je vous propose de regarder mon article : http://aroundme.fr/2010/08/06/10-outils-pour-ses-galeries-photos/
Bonjour,
Diapo vraiment bien fait et super pratique!
Cependant, je renchéris sur la question de Clément :
J’aurais besoin de ce diaporama dans un div qui sera en background par rapport au contenu du site…
(Mon div fait 1700 par 300 et est positionné en absolu avec un z-index à 1 et le reste à z-index:2…)
Est-ce possible?
Cordialement
CF mon dernier commentaire.
salut et merci bôcoup bôcoup pour la découverte de ce script, j’ai réussi à l’adapter pour mon site sans être un informaticien pro !
J’ai juste pas réussi à y placer un bout de code pour y introduire une touche de random, à chaque fois ca casse le lien vers les images, j’ai posé la question là bas mais sans réponse et disparue ce matin !!!
$.fn.bgStretcher.randomize = function(animate, notCurrent){
var allLIs = $(containerStr + ‘ UL LI’);
var current = allLIs.filter(’.bgs-current’);
do {
var next = allLIs.eq(Math.floor(Math.random() * allLIs.size()));
} while (notCurrent && next.is(’.bgs-current’))
if(animate && !next.is(’.bgs-current’)) {
current.removeClass(’bgs-current’).fadeOut( $.fn.bgStretcher.settings.slideShowSpeed );
next.addClass(’bgs-current’).fadeIn( $.fn.bgStretcher.settings.slideShowSpeed );
} else {
current.removeClass(’bgs-current’).hide();
next.addClass(’bgs-current’).show();
}
}
Merci pour ton blog et super portrait
Pieter
Merci pour le tuto. Mais comment fait-on pour changer d’animation de transition??? merci
De rien. En ce qui concerne les animations je te suggère de te reporter à la documentation… mon article est déjà un peu vieux et les choses ont certainement déjà changé
merci pour la dépanne !