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.

jquery

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;
}

demo

download

share small

Vous aimerez peut-être:...

22 Responses

  1. Mister aiR dit :

    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

  2. Sylvain dit :

    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.

  3. Mister aiR dit :

    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…

  4. Sylvain dit :

    ok :), j’attend les résultats de ton test du coup :p

  5. Mister aiR dit :

    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 ;)

  6. Sylvain dit :

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

  7. Mister aiR dit :

    Tu l’as remplacé par quoi?

  8. Olivier dit :

    Il faudrait mettre ça sous forme de plugin wordpress pour les fainéants comme moi ;)

  9. Sylvain dit :

    @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 :)

  10. Patrick dit :

    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.

  11. Patrick dit :

    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.

  12. Alex dit :

    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 :)

  13. Arthur dit :

    Merci!!!! je le cherchais depuis un moment ce code ;)

  14. Arthur dit :

    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!

  15. Virginie dit :

    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

  16. Sylvain dit :

    @Virgine, tu as un lien a nous passer pour voir ton code ?

  17. Virginie dit :

    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!!!

  18. Sylvain dit :

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

  19. ced dit :

    C’est nul à chier, pour moi c’est pas un slideshow WordPress ça , c’est juste un bout de code scotché à WordPress. le contenu des slides n’est pas issu de la base de donnée éditable via wp-admin.

    Zéro !

  20. Sylvain dit :

    Toi, j’ai comme l’impression que t’as mangé un truc pas frais, fais attention tu vas te rendre malade ;)

  21. co dit :

    Bonjour,

    J’ai l’erreur suivante. Pouvez-vous m’aider SVP ?

    [jquery.form] terminating; zero elements found by selector

  1. 5 avril 2009

    Retrouvez cet article sur Blogasty …

    Vous aimez cet article? Votez pour lui sur Blogasty …

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>