Prenons comme exemple la petite image d’Eric dans mon blog (juste ci-dessus). Cette image change toutes les 10 secondes environ avec un petit effet de transition, pas encore très sexy, mais c’est une première esquisse du code qu’idéalement je devrais améliorer par la suite.
Avant toute chose il faut charger dans la page jQuery. Ensuite, afin d’afficher rapidement les images, qui sont assez lourdes, on utilise un petit plugin qui va se charger de mettre dans le cache du navigateur toutes nos images, seulement une fois que la page sera complètement chargée.
Ensuite, nous allons mettre dans une variable le chemin vers le répertoire du template de wordpress dans lequel nous avons stocké nos images, et on commence à les mettre dans le cache du navigateur (imaginons que nous en avons 10 et que toutes ont le même prefixe et qu’elles sont du même format).
Pour finir, on ajoute le bout de code qui se charge de changer l’image de manière aléatoire toutes les dix secondes pour obtenir:
$.preloadImages = function()
{
for(var i = 0; i<arguments .length; i++)
{
img = new Image();
img.src = arguments[i];
}
}
$(document).ready(function(){
var imagePath = "<?php bloginfo('stylesheet_directory'); ?>/images/";
for (i=0; i<10; i++)
{
$.preloadImages(imagePath + "eric" + i + ".jpg");
}
var refreshImage = setInterval(function() {
randomnumber=Math.floor(Math.random()*10);
$("img[@alt=banner]").hide();
$("img[@alt=banner]").attr("src", imagePath + "eric" + randomnumber + ".jpg").fadeIn('slow');
}, 10000);
});
Notez, que vous pouvez remplacer $("img[@alt=banner]") par la classe ou par l’id assigné à l’image de votre bannière.
Le pas suivant sera d’insérer une image de transition ainsi que la vérification que la nouvelle image soit différente de celle affichée juste avant.