Un Slideshow jQuery Wordpress en guise de bannière

Je vous propose aujourd’hui un petit tutoriel pour adapter et mettre en place un slideshow jQuery sous Wordpress pour l’utiliser comme bannière.

Dans ce tutoriel, rien de compliqué ni de transcendantal non plus, c’est juste histoire d’adapter un slideshow jQuery très simple en tant que bannière de blog.

Pour ce tutoriel j’ai simplement adapté ce slideshow à wordpress.
Tout d’abord, je vous propose de créer un dossier à la racine de votre thème wordpress pour pouvoir y placer les images qui seront contenus dans le slideshow.

Si vous avez zyeuté le lien et la démonstration du tutoriel original, vous pouvez voir que le slideshow s’adapte à la taille de l’image, c’est pouquoi il est important que toutes vos images soient de la taille de bannière que vous souhaitez mettre en place, pour ma démonstration, les images font 986px par 180px de hauteur.

On entre dans le vif du sujet, on place l’appel du script dans le header.php avant la balise body de son thème en prenant soin de placer le script jQuery également à la racine de son thème :

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.js"></script>

Ensuite, nous allons placer les images de cette façon, j’ai nommé mes images 1,2,3,4, etc.. mais il est tout à fait possible de les appeler comme vous le voulez après/dans la balise body :

<div id="slideshow">
<ul class="ppt">
<li><img src="<?php bloginfo('template_url'); ?>/slideshow/1.png" alt="1"></img></li>
<li><img src="<?php bloginfo('template_url'); ?>/slideshow/2.png" alt="2"></img></li>
<li><img src="<?php bloginfo('template_url'); ?>/slideshow/3.png" alt="3"></img></li>
<li><img src="<?php bloginfo('template_url'); ?>/slideshow/4.png" alt="4"></img></li>
<li><img src="<?php bloginfo('template_url'); ?>/slideshow/5.png" alt="5"></img></li>
<li><img src="<?php bloginfo('template_url'); ?>/slideshow/6.png" alt="6"></img></li>
<li><img src="<?php bloginfo('template_url'); ?>/slideshow/7.png" alt="7"></img></li>
</ul>
</div>

avec en plus le script qui va bien :

<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

function animate() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'last' )
		cur = $('.ppt li:first');
	else
		cur = cur.next();
	cur.fadeIn( 1000 );
}

$(function() {
	setInterval( "animate()", 5000 );
} );
</script>

Sur votre feuille CSS, il faudra ajouter quelques lignes pour la mise en forme :

ul.ppt {
	position: relative;
}

.ppt li {
	list-style-type: none;
	position: absolute;
	top: 0;
	left: 0;
}

et voila, c’est fini

Vous pouvez personnaliser votre slideshow en y ajoutant le titre de votre blog et même la description, il faudra pour cela jouer avec le z-index en CSS qui, pour rappel, permet de mettre en premier ou arrière plan un élément. L’élément qui a la plus grosse valeur passe devant les autres.

Exemple :

#slideshow {
    z-index:10;
}
#title {
   z-index:10;
}

A voir également:

« Billet précédent

Billet suivant »

Mister aiR
5 avr, 2009

Lourd! Beaucoup trop lourd comme slideshow! mettre çà en bannière de blog c’est limite du suicide.
Le jQuery c’est très bien, mais parfois cela peut plomber le temps de chargement d’une page
Essaye plutôt avec ce slide en flash paramétrable–> http://www.alsacreations.fr/dewslider
Sylvain
5 avr, 2009

Ce qui se passe aussi, c’est que mes images sont lourdes aussi, j’ai pas pris le temps de les optimiser et elles se chargent toutes au chargement de la page.
Mister aiR
5 avr, 2009

Si tu arrives à diviser par 10 le temps de chargement c’est jouable, mais vu la largeur de t’es images je ferais un test comparatif entre le slide jQuery et Flash pour voir lequel tiens mieux la route…
Sylvain
5 avr, 2009

ok , j’attend les résultats de ton test du coup
Mister aiR
5 avr, 2009

Bon j’ai testé sur mon pc, il n’y a pas beaucoup de différence… Les tailles de fichier sont kif-kif, et le temps de chargement idem. Mais ton slide s’affiche déjà 10x plus vite avec les images sur le pc… donc cela peut aussi provenir de l’hébergement.
A toi de tester sur ton site pour mieux voir la différence
Sylvain
5 avr, 2009

@Mister aiR, le slideshow n’est plus sur mon site, je l’ai remplacé par autre chose
Mister aiR
5 avr, 2009

Tu l’as remplacé par quoi?
Olivier
6 avr, 2009

Il faudrait mettre ça sous forme de plugin wordpress pour les fainéants comme moi
Sylvain
6 avr, 2009

@Olivier, quand tu as toutes tes photos à la bonne taille, c’est moins de 10 min pour la mise en place.
Mais l’idée est intéressante pour un plugin wordpress
Patrick
7 mai, 2009

Il doit être prudent avec les couleurs, à la troisième photo de votre démonstration, je ne peux pas voir votre nom.

Toutefois, c’est une bonne adaptation du slideshow de mon ami Karthik.

Pardon si français n’est pas bon.
Patrick
7 mai, 2009

Il doit être prudent avec les couleurs, à la troisième photo de votre démonstration, je ne peux pas voir votre nom.

Toutefois, c’est une bonne adaptation du slideshow de mon ami Karthik.

Pardon si mon français n’est pas bon.
Alex
6 juin, 2009

Merci pour ce tuto c’est exactament ce que je recherchais ! Par contre j’ai un petit bug qui doit être une erreur toute bête mais lorsque la banniere est en place mon site se décale vers le bas et remonte à chaque transition de photo …
Erf .. Si vous avez une idée ca serait super sympa
Arthur
13 juin, 2009

Merci!!!! je le cherchais depuis un moment ce code
Arthur
9 juil, 2009

Bon je n’y arrive pas… alors que j’avais un ancien thème sous DotClear dont la bannière fonctionnait avec le même principe jQuery!
Virginie
23 oct, 2009

Bonjour,

Je viens de mettre en place ce code, mai une fois que le slideshow arrive à la dernière phot, il ne repart pas à la première. Comment ça se fait???

Merci d’avance

Virginie
Sylvain
23 oct, 2009

@Virgine, tu as un lien a nous passer pour voir ton code ?
Virginie
26 oct, 2009

Bonjour,

Je travaille en direct sur le site, j’ai donc mis le code entre balise de commentaire étant donné le problème. Mon site est: http://www.ecotourisme-magazine.com et le carrousel dit prendre la place de a bannière « devenez partenaire » en haut à droite. Les codes sont quand même visibles entre les balises et .

J’ai un autre « bug », quand ma bannière s’affiche dans le carrousel elle s’affiche d’abord sur le bandeau du site (une seconde) puis remonte à sa place. Sais tu d’où cela pourrait venir?

Merci d’avance pour tes réponses, je suis une débutante et c’est pas facile!!!
Sylvain
26 oct, 2009

j’ai regardé, je ne vois pas d’ou ça peut venir
désolé…