jDiaporama v3 : le diaporama jQuery est de retour !

Publié par Gui dans jQuery, Tutoriels

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 !

89 commentaires

1 2 3 4
  1. Julien

    Génial ! Chapeau l’ami 🙂
    Je testerai dès que possible, peut-être dans mon fameux projet de réseau pour la fac ^^

  2. Sébastien Angot

    Un magnifique projet qui vient concurrencer l’actuel Nivo Slider! Bravo pour ce super diapo!
    A quand une version de WP-jDiaporama ?

  3. Prayag Verma

    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

    • Gui
      • Prayag Verma

        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)

  4. Jonathan

    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.

    • Gui
      • Romain

        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 !

  5. Loupi

    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!

    • Gui
  6. Patrick

    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

  7. NeepNeep

    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

    • Gui
  8. freeShadow

    Génial ton script, je vais le test dès maintenant !!

  9. Jonathan

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

  10. Marc

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

  11. Marc

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

    • Gui
  12. Marc

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

  13. Benoit

    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,

  14. Fab

    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

  15. Floh

    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

  16. Fred

    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.

    • Gui
  17. Fred

    @ 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 »
    });

    • Gui
      • Fred

        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.

  18. Floh

    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

  19. Gabriel

    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

1 2 3 4

Laisser une réponse à Patrick


Post shadow