Tutorial plugin JQuery #4 : diaporama photo avec Cycle
tags : cycle, diaporama, JQuery, photo, plugin JQuery
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.
Voir une démo en live du plugin Cycle (tous les effets sont testables directement à partir de la liste déroulante).
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.
catégorie : JQuery
Bonjour,
j’ai inclu le plugin … mais cela ne fonctionne pas …
Quelqu’un pourrait m’aider svp ??
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.
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 ??
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.
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
[...] la possibilité de créer un diaporama. J’avais rédigé, il y a quelques temps un tutorial pour mettre en place ce [...]
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 ?
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 ?
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.
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
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.?
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 ?
Bonjour, j’ai un problème avec ce script il ne fonctionne pas sous Opera, quelqu’un sait-il comment faire ?
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)