jDiaporama v3 : le diaporama jQuery est de retour !
Facile
jQuery
Moins d’un an après la sortie de la version 2 de jDiaporama et plus de 35 000 pages vues, je vous présente aujourd’hui la toute dernière version dotée de nombreuses nouvelles fonctionnalités !
Au programme de cette nouvelle version :
- Affichage de miniatures pour contrôler le diaporama
- Pas moins de 12 nouvelles animations de transitions !
- Ajout et configuration d’easing pour certaines animations
- Ajout de contrôles externes pour interagir avec le diaporama
- Ajout de nombreuses fonctions de callback
- Choix de la position des miniatures (dessus / dessous)
- Version pack de seulement 20 ko !
- Gestion partielle de la cohabitation d’images au format portrait et paysage
- Ajout d’un mode debug
- Diverses optimisations, améliorations et corrections de bugs
Transitions
Voici les 12 nouvelles transitions disponibles dans jDiaporama 3.0 :
- fade
- slide
- slidev
- slideDiago
- slidevInverse
- slicesliceHide
- sliceBarsH
- sliceBarsHAlternate
- sliceBarsV
- sliceBarsVAlternate
- sliceBarsVFade
- boxRandom
Configuration
Voici la liste complète des options configurables de jDiaporama 3.0 :
debugMode: false, // Affiche des informations dans la console
auto: true, // Le diaporama se lit automatiquement
delay: 3, // Délai avant chaque transition
animationSpeed: "slow", // Vitesse d'animation
controls: true, // Affichage des boutons de contrôle
status_controls: true, // Affichage des boutons de contrôle du bottom (miniatures)
statusPosition: "bottom", // Position de la status bar
keyboard: true, // Navigation au clavier
infos: true, // Affichage des informations sur l'image
onrollover: true, // Affiche des infos uniquement au rollover sur l'image
currentimage: true, // Affiche du compteur
paused: false, // Diaporama en pause au début
boucles: 0, // Nombre de boucles avant que le diaporama ne s'arrête, 0 = illimité
sens: "right", // Sens du diaporama par défaut
random: false, // Lecture aléatoire
transition:"random", // Transition: "fade" ou "slice" ou ["slice", "fade"] pour un affichage aléatoire parmi celles choisies
animationEasing: "easeInQuint", // Easing pour les animations
theme: "default", // Thème par défaut
useThumbs: false, // Utilisation des miniatures
thumbsDir: null, // Répertoire où se trouvent les miniatures
constraintWidth: true, // Adapter la taille de l'image automatiquement
nbSlices: 10, // Nombre de tranches horizontales pour les transitions
nbSlicesH: 6, // Nombre de tranches verticales pour les transitions
onceLoaded: function(){}, // Fonction appelée une fois le script initialisé
animationStarts: function(){}, // Fonction appelée à chaque début de transition
animationStops: function(){}, // Fonction appelée à chaque fin de transition
imageClick: function(){} // Fonction appelée au click sur l'image
Démo et téléchargement
Vous pouvez voir jDiaporama 3.0 en action ici: DEMO
Le projet est maintenant disponible sur github ! Téléchargez les sources ici: Télécharger jDiaporama 3.0
Qu’en pensez-vous ?
N’hésitez pas à donner vos remarques dans les commentaires ! Si vous avez des suggestions d’ajout / amélioration, c’est le moment !
Ces articles peuvent aussi vous intéresser :
89 commentaires
Génial ! Chapeau l’ami 🙂
Je testerai dès que possible, peut-être dans mon fameux projet de réseau pour la fac ^^
Un magnifique projet qui vient concurrencer l’actuel Nivo Slider! Bravo pour ce super diapo!
A quand une version de WP-jDiaporama ?
Hi I tried to implement this in Blogger platform but there are some problems like the previous image is appearing while the transitions
Please Suggest a Solution , Here is the URL where I tried to implement it http://www.demo.stylifyyourblog.com/2011/08/diaporama.html
Well, right now, It seems to be not working at all. Have you correctly installed it ?
Its working now ,please check it to see what is causing the problem (of small bit of the previous image appearing in the next image)
Merveilleux, je cherchais une solution pour arriver à mes fins sans utiliser de flash. Le seul hic, c’est que si on a une grande quantité d’images, les thumbnails dépassent à droite. Serait-il possible de contenir les thumbnails à la largeur de l’image et de mettre une barre de défilement horizontal pour naviguer? En tous cas bravo, très beau travail.
Je suis bien d’accord ! J’ai pas encore eu le temps de me pencher sur ce cas là. Mais j’y compte bien dès que j’ai un moment de libre !
Bonjour,
Pour pallier à cela je me suis permis de fixer la largeur de la css .jDiaporama_status (ex : width:580px;). Ensuite j’ajuste la hauteur de mon container global en fonction du nombre de lignes créées pour que mon arrière plan colle à ma zone de vignettes.
Dans l’immédiat ça me paraît être la solution la plus simple.
J’ai tenté une manière différente en limitant le nombre de vignettes affichées (ex : 1 palier = 9 vignettes) et en renouvelant cet affichage quand la photo active passe au palier suivant. Malheureusement (étant une bille en Javascript) mon actualisation des vignettes s’ajoute aux vignettes déjà en place au lieu de les renouveler…
A ce propos Guillaume quelle ligne pourrait me permettre de « vider » l’affichage des vignettes avant de le recalculer ?
Pour finir, merci pour la qualité de ton site !
Bonjour,
J’avais la précédente version mais l’ajout de miniature est très intéressant, je suis don passé à cette version, mais j’ai quelques problèmes:
Tout d’abord les transitions, je ne souhaite pas de transition en réalité, ou une simple comme celle qu’il y avait sur la précédente version, j’ai donc essayé de changer la transition dans jquery.jDiaporama.js dans la partie PLUGIN OPTIONS, mais j’ai beau modifier le random par d’autres options les transitions sont tjs les mêmes
Où peut on modifier les transition et par exemple n’en mettre qu’une et la même tout le temps?
Autre petite souci, pour la mise en forme, ça ne passe pas apparemment par le css pour les miniatures? J’ai vu qu’il y avait apparemment une bordure pour les photos, mais je n’en voudrais que pour les miniatures et pas la photo à taille réelle; comment modifier cela?
Merci d’avance pour les réponses!
En fait, le choix de la transition se gère dans le fichier script.js qui gère la configuration du diaporama (voir la démo). Il te suffit alors de mettre l’option transition: « fade » dans les options.
Pour ce qui est des bordures etc… Tout se gère en CSS, tu peux donc changer ce que tu veux !
Bonjour,
Y a t-il un nombre maximum de photos ou est ce comme les versions précédentes, nombre illimité ?
Merci d’avance
Patrick
Nop illimité 😉
Bonjour j’intègre actuellement un diapo à mon site.
-Toutes les images ont la même taille et pourtant elles se décale et en plus les effets font un truc anormale
Si quelqu’un voie une erreur ou à déjà eu affaire a ce type de problème,
Voila, Merci de vos réponses
Cela vient en fait du css par défaut attribué aux listes. Il faut que tu enlèves les marges et le padding au < ul > (margin:0; padding:0) et tout baignera 😉
Merci sa marche nikell 😀
Génial ton script, je vais le test dès maintenant !!
Bonjour,
Nikel comme plugin, mais j’ai juste un probleme,
J’utilise ce systeme de diapo pour faire defiler des img publicitaires sur plusieurs sites.. ça fonctionne parfaitement, à part que lorsque qu’il y a plusieurs diapo en meme temps sur la page, ils ne fonctionnent pas tous à la fois… certains s’arretent, puis repartent… cela de maniere completement aleatoire…
Si vous avez une solutions, je suis prenneur !!!
Merci d’avance !
++
Euh, moi j’ai un soucis lorsque j’ai plus de 9 images, la fenêtre s’agrandit!?
Est-ce normal ou j’ai changé de quoi par erreur??
Il serait intéressant d’ajouter un outil de défilement dans le bas! 😉
Surtout de mettre les thumbnails dans un div différent car la fenêtre de la photo défile en même que l’on se promène sur les thumbnails!!!
J’ai ajouté aussi la possibilité d’afficher le titre des images lorsque l’on passe la souris sur une image et je suis en train de faire la patch pour le scroll des thumbnails si tu la veux après! 😉
Hello Marc,
L’affichage du titre au rollover des images existe déjà mais pr le scroll des thumbnails, j’attends de voir ça avec impatience 😉
Tu vois mon if que j’ai ajouté, si ce n’est pas clair, je te l’envois par courriel!
Ligne 113: if(diapoObj.options.useThumbs)
{
filename = $(« img », $(this)).attr(« src »);
if ($(« img », $(this)).attr(« alt ») == « ») { // This added by Zzyb Design to show Title of thumbnails onmouseover 😉
alttext = $(« img », $(this)).attr(« title »);
} else {
alttext = $(« img », $(this)).attr(« alt »);
}
tmp = filename.split(« / »);
if(diapoObj.options.thumbsDir)
{
thumbname = diapoObj.options.thumbsDir+tmp[tmp.length-1];
bullet += » class=’imgBack’ title=' » + alttext + « ‘ style=’background-image:url(« +thumbname+ »)' »;
}
else
if(this.options.debugMode) log(« Le répertoire des miniatures n’a pas pu être trouvé. », « error »);
}
Bonsoir,
Puis-je utiliser ce projet pour faire un menu diapo pour le site que je suis en train de developper?
Chaque element du menu ferait environ 150px sur 100px et je voudrais faire un diapo pour chacun des éléments
Cordialement,
Of course ! Tu peux utiliser tous mes tutoriaux pour tes projets, ya aucun souci 😉
Bonjour ce diaporama est super et très simple.
j’ai juste un souci sous IE7 ou des erreurs javascript apparaissent et empeche le bon fonctionnement du diapo. « invalid procedure call or argument »
merci
Je n’ai pas rencontré ce problème sur IE7, peux-tu m’en dire plus sur le contexte ?
Hi,
je n’arrive pas à faire fonctionner le mode random sur mon diaporama, j’ai bien ajouter « random: true » lors de l’appel de ma fonction.
Merci pour vos réponses
Thx
Bonjour superbe diaporama, merci à toi.
Je n’est pas réussi à voir s’il était possible qu’une fois arrivé à la dernière image, le diaporama reparte dans l’autre sens et ainsi de suite, au lieu de retourner à la première image.
Un système de va et viens en fait.
Merci pour la réponse.
Hello,
Non ce n’est pas prévu actuellement, mais ça peut faire l’objet d’une implémentation pour une future version 😉
@ floh
Il te faut mettre : transition: »random » dans ton script
var myDiapo = jQuery(« .diaporama1″).jDiaporama({
delay:2,
width:900,
height:408,
boucles:0,
sens: »right »,
transition: »random »
});
Merci Fred de répondre à ma place ! Saches que tu peux aussi répondre directement à quelqu’un en cliquant sur le lien « répondre » de son commentaire (comme je le fais actuellement pour toi).
De rien.
Par contre je crois que j’avais mal compris la question car en effet quand on met random: true pour l’affichage aléatoire des images, et non translation : random ( pour les transitions aléatoires ) dans var myDiapo, et bien le diaporama reste bloqué car une erreur JS apparait :
Erreur : b(« li.active », c).attr(« id ») is undefined
Je n’arrive pas à comprendre pourquoi.
Merci pour ton aide.
Merci de vos réponses à vous deux. Oui effectivement je veux faire un random sur l’ordre d’affichage et non sur les transitions.
Moi je reçois une erreur : « nextImage is not defined » au niveau de la section « Slide process » du jquery.jDiaporama.js
Merci de votre aide.
Cordialement
Voilà le problème est corrigé (https://github.com/guillaumevoisin/jDiaporama/commit/ee5e70169388072f93771d3dc06436e532edb1d5).
Merci pour votre veille 😉
Vous pouvez directement télécharger le zip sur github, il est à jour.
Salut j’ai fait la mise à jour mais j’ai toujours les erreurs js Erreur : b(« li.active », c).attr(« id ») is undefined.
J’utilise la version compacter.
Merci pour ton aide.
Bonjour, dans iE7 j’ai une erreur qui arrête le fonctionnement complet du diaporama après un certain moment.
« Impossible d’obtenir la propriété display. Argument non valide. » Dans jquery-1.6.1.min.js Je n’ai rien changé au code pour le moment, ce n’est que le fichier source de départ.
Je n’y connais pas grand chose alors je suis bloqué.
Merci d’avance pour l’aide