Tutorial plugin JQuery #4 : diaporama photo avec Cycle

Plugin JQuery que je connaissais depuis quelques temps déjà : Cycle. Cycle est plugin permettant de faire très simplement un diaporama de photos (ou d’images) avec JQuery.  27 effets de transitions sont disponibles avec le plugin de base et encore plus en le couplant avec le plugin JQuery.Easing.

Diaporama photo avec Jquery et le plugin Cycle

Voir une démo en live du plugin Cycle (tous les effets sont testables directement à partir de la liste déroulante).

demo du plugin JQuery Cycle

Voici donc comment mettre en place le plugin le plus simplement :

On commence par charger le framework JQuery et le plugin Cycle (il faut que ce soit dans cet ordre) :

1
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.js"></script>

Ensuite il faut, dans le code html, insérer toutes les images que l’on veut dans le diaporama. Il faut que ces images soit les une à la suite des autres dans un bloc (<div> de préférence) ayant un id (ici l’id est diapo)

1
2
3
4
5
6
7
8
9
10
11
<div id="diapo">
	<img src="2.jpg" alt="" />
	<img src="3.jpg" alt="" />
	<img src="4.jpg" alt="" />
	<img src="5.jpg" alt="" />
	<img src="6.jpg" alt="" />
	<img src="7.jpg" alt="" />
	<img src="8.jpg" alt="" />
	<img src="9.jpg" alt="" />
	<img src="10.jpg" alt="" />
</div>

Enfin il faut initialiser le plugin dans le code JavaScript de la page (soit un fichier externe soit directement dans la page) en indiquant dans le selecteur l’id du bloc contenant les photos. J’ai ajouté deux attributs : fx qui permet de choisir l’effet de transition (voir la page de démo pour la liste des effets disponibles) et timeout qui permet de définir la vitesse de défilement des photos.

1
2
3
4
5
6
$(document).ready( function () {
	$('#diapo').cycle({ /* #diapo signifie "le bloc ayant diapo comme id" */
    		fx:    'toss', /* effet choisi (voir la liste deroulante ci-dessous) */
    		timeout: 3000 /* temps en millisecondes (ici 2 secondes) entre chaque photo */
    	});
});

Le plugin JQuery.Cycle est disponible en téléchargement ici.

Cette entrée a été publiée dans JQuery, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.

28 reponses a Tutorial plugin JQuery #4 : diaporama photo avec Cycle

  1. Aurélie dit :

    Bonjour,
    j’ai inclu le plugin … mais cela ne fonctionne pas …

    Quelqu’un pourrait m’aider svp ??

  2. arnaud dit :

    Bonjour,
    as-tu suivi et respecté le code donné ci-dessus ? as-tu regardé le code exact sur la page de démo ?

    Je veux bien aider mais il me faudra plus d’information que cela. Y aurait-il une page en ligne pour voir ce que tu as fait ? je pourrai alors te donner des pistes pour arriver à le faire fonctionner.

  3. Aurélie dit :

    J’ai réussi avec le code que tu as …
    Seulement, je dois intégrer ce code dans un site internet, et la librairie utilisée est jquery.js …
    Est-possible d’adapter ton code avec cette librairie ou faut-il que je recherche d’autre jquery.cycle qui fonctionne avec jquery.js ??

  4. arnaud dit :

    jquery.cycle est un plugin JQuery, c’est-à-dire un module complémentaire à jquery.js. Tu dois donc importer le fichier jquery.cycle.js en plus du fichier jquery.js. C’est la seule solution.

    Après le reste du code fonctionnera comme sur les exemples.

  5. Pandakore dit :

    Bonjour et merci pour ce script :)

    je voudrais faire la même chose mais avec plusieurs photos dans la fenêtre et pas une photo par une photo, car j’ai des formats de photos différents et quand elles sont moins je voudrais qu’elle apparaisse côte à côte pour remplir la fenêtre complète.
    Est-ce possible ? Où dois-je chercher une solution ?

    Cordialement

  6. Ping : » Les 10 meilleurs plugins JQuery (selon moi) // JQuery, PHP, html, design… // arnaud-k : un blog de geek

  7. Xavman dit :

    Hi Arnaud,

    Marche bien chez moi ce plugin.

    Cependant il faut mettre toutes les images dans la page HTML ce qui l’alourdi.

    C’est quoi l’astuce pour les mettre dans un fichier externe ?

  8. fredbgt dit :

    le plugin marche très bien. Chapeau bas pour le code en javascript.

    J’ai toutefois un besoin particulier : J’aimerais pouvoir faire défiler le diaporama non pas de façon automatique avec un timer, mais sur demande du visiteur (par un clic pour chaque diapo).

    Est-ce possible ?

  9. valantin dit :

    Bonjour et merci pour le tuto,
    J’aimerai savoir si c’est possible d’arrêter le diaporama à la dernière image et faire en sorte que ca bloque sur la dernière image (Pas de boucle)
    Est ce possible ? est ce qu’il faut toucher au fichier j.s ?

    Merci d’avance.

  10. Jérôme dit :

    Bonjour,

    Merci pour ce tuto, c’est sympa. J’ai un petit souci, lorsque je recharge ma page, toutes les photos s’affichent pendant 2ou 3 secondes le temps que la page soit reactualisée, y-a-t-il une raison a cela?

    Merci pour votre aide

  11. Sylvain dit :

    Même chose pour moi, les photos restent une à deux secondes en statique, ce qui ‘tue’ un peu l’effet escompté, y’a t’il une solution.?

  12. Cyil dit :

    Slt,
    Pas mal ton code, je l’ai utilisé pour mon site et il fonctionne super bien…par contre sur I.E , il me semble que c’est pas aussi efficace. j’ai un bug dés que j’accède au site (les images ne s’affichent pas)…
    est ce qu’il y a une solution ?

  13. batist dit :

    Bonjour, j’ai un problème avec ce script il ne fonctionne pas sous Opera, quelqu’un sait-il comment faire ?

  14. batist dit :

    Bon finalement j’ai réussi à le faire fonctionner, par contre j’ai la derniere version 1.4.2 de jquery.min.js et avec celle-ci, les images qui défilent dans le diaporama deviennent super grande, la 1ere qui s’affiche et ok mais les autres sont enormes, quelqu’un peut m’aider ? (tjr avec opera)

  15. Anis dit :

    Slt,
    Je voulais savoir s’il y a la possibilité d’ajouter une légende (un texte) qui défile avec l’image. chaque image aura ça légende.
    Merci.

  16. Ping : » Un plugin JQuery Flickr pour afficher ses dernières photos - JQuery, PHP, html, design… // arnaud-k : un blog de geek

  17. Cathy dit :

    Bonjour
    Merci pour ce diaporama, c’est exactement ce que je cherchais. Seul petit soucis, le choix de l’effet ne fonctionne pas. Il reste toujours sur blindX.

    Si quelqu’un a une idée.
    merci d’avance

  18. tintinak dit :

    Bonjour, j’essaye de mettre en place ce plug in en local mais au lieu de me faire défiler les photos, il me les affiche les une au-dessous des autres.
    Avez vous déjà rencontré ce problème.
    Merci à très vite

  19. Richard dit :

    Marche très bien :) parfait! merci…

  20. nesrine dit :

    salut

    j’ai essayé ce plugins et d’autres pour avoir un slideshow, mais avec tous ce que j’ai essayé, j’ai seulement les images affichées sans l’effet de transition. On dirait que ni le plugins ni le java script ne fonctionnent. (seulemnt l’affichage du html))
    serait t il possible de m’aider?

    merci

  21. Amélie dit :

    Bonjour et merci pour le tuto,
    J’aimerai savoir si c’est possible d’arrêter le diaporama à la dernière image et faire en sorte que ca bloque sur la dernière image (Pas de boucle)
    Est ce possible ? est ce qu’il faut toucher au fichier j.s ?
    Je cherche désespérément une réponse. Mille et un merci d avance

  22. amelie dit :

    Bonjour,
    Avez-vous une solution pour arrêter le diaporama à la dernière image et faire en sorte que ca bloque sur la dernière image (Pas de boucle)

    Merci de votre reponse

    Amelie

  23. Howdy are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and set up my own.

    Do you require any html coding expertise to make your own blog?
    Any help would be greatly appreciated!

  24. Mickey dit :

    Bonjour je suis en train de me débattre avec HTML et CSS. Je veux sur ma première page un diapo comme cycle.js. Les 4 photos que j?ai mise s’affichent ensembles en carré et il n’y a pas de fade!
    dans mon code, je ne vois pas les lignes supplémentaires qui apparaissent avec les images sur le site démo!?!
    que manque-t-il?

    Merci Mickey

  25. Alain dit :

    Jai installé le plugin cycle pour afficher un diaporama dans une fenêtre lightbox, il fonctionne bien à l’endroit ou je veux mais par contre les images sont très grosses comment faut-il faire pour qu’elles ne dépassent pas la fenêtre
    Merci Alain

  26. xavier dit :

    @Alain pourquoi tu ne mets pas des valeurs de largeur et de hauteur sur chaque images
    @Mickey tu as du mettre des liens relatifs mets tes liens en dur

  27. Alain dit :

    J’ai installé le plugin dans mon site mais cela ne marche pas (site menu exposition)
    je ne sais pas où placer l’initialisation du plugin dans a page html

  28. Eddy dit :

    Bonjour, je suis non-voyant.
    sur un future site je voudrai intégrer 3 bloque de diapo avec le plugin cycle. pourriez vous me donner des infos sur la procèdur a suivre… merci a vous

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>