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. thierry

    Bonjour,

    J’ai utilisé ce superbe diaporama pour mon site ; je me heurte à une difficulté.Je n’arrive pas à trouver le script pour modifier l’emplacement des thumbs ; par exemple pour les mettre au dessus du diaporama plutôt qu’en dessous.

    Pouvez-vous m’aider ?

    • Marc

      Les thumbs sont dans un div que tu peux ajuster ton css!!! Si tu utilises firebug pour pointer sur le bon div, tu vas vite voir quel div à ajuster! 😉

  2. benkusz

    Bonjour, merci pour ce super diaporama !!

    Je n’arrive pas à trouver où intervenir pour faire apparaitre les « jDiaporama_status a » (petits ronds ou carrés permettant d’accéder directement à une image) au dessus de l’image principale…

    Merci pour la réponse !

  3. Dom

    Bonjour,

    je rencontre un petit soucis, en fait, lorsque la page reste affiché un petit moment, la vitesse de défilement s’affole et les images tournent tellement vite qu’on ne voit pas, et saute même certaines images.
    Avez vous déjà rencontré ce bug ?

    Merci

  4. Rémi

    Bonjour,
    Votre outils à l’air vraiment très complet!
    Cependant, j’ai un petit soucis:
    Je n’arrive pas à changer les paramètres du diaporama.
    la class de mon diaporama s’appelle « diaporama1 ».
    Voici ce que j’ai écris dans le header de ma page:

    $(« diaporama1 »).jDiaporama({
    onrollover: true,
    delay: 10,
    width:700,
    height:450
    });

    Le diaporama fonctionne mais j’ai l’impression que ma fonction ne fonctionne pas. Je pense qu’il y a un problème au niveau de l’appelle.

    Merci de votre aide !

  5. npirotte

    Bonjour,

    Je m’intéresse beaucoup à ce diaporama parce qu’il a une fonction « aléatoire », mais j’ai un petit problème avec celle-ci. Lorsque j’écris « random: true dans le script », le diaporama ne se lit plus automatiquement…

    • Sybilla

      Bravo !!! Je n’en reneivs pas de la qualité et du pétillant des commentaires, des infos, des photos, de la richesse du contenu ! Avec des amis nous avons créé un blog et nous sommes loin très loin de vous arriver à la cheville !!!

    • ach

      il faut incrémenter un id dans le li :
      <img …
      <img …

      • ach

        il faut incrémenter un ‘id’ dans le ‘li’ :
        id= »jDiaporama_image_1″
        id= »jDiaporama_image_2″

  6. grab

    Bonjour et tout d’abord bravo pour ce diaporama qui est juste très très bon.

    Pour ma part dans le cadre du développement de mon site perso je souhaite supprimer les thumbs, supprimer le menu avoir simplement deux images l’une avec l’autre.

    N’ayant pas fais de jquery pouvez vous m’éclairer?

  7. grab

    En faite c’est réglé ! Merci !

  8. debkas

    Bonjour,

    Le diapo est super et marche très bien sur ie et Firefox. Cependant sur Chrome, les images ne défilent pas correctement.
    Aurez-vous une idée du problème?

    Merci beaucoup

  9. Ali

    Diapo génial et excellent tuto ! Merci ! On en redemande 😉

    @ debkas, testé sur FF, IE, Opera, Chrome, Safari, je ne rencontre aucun problème. Met à jours ton navigateur.

  10. Thomas

    Merci pour ce tutorial.
    Très bien fait ton Diaporama. 🙂

  11. ygnobl

    Bonjour, désolé d’embêter mon monde, mais je cherche à afficher des images de tailles différentes, en centrant le diaporama, et en centrant aussi les images dans le cadre du diaporama. Je n’ai malheureusement pas réussi à déplacer le diaporama vers le centre de son cadre, alors que je l’ai inclus dans un div pour le positionnement.

  12. ygnobl

    Oups, j’ai glissé… J’ai oublié le plus important, tout mes remerciements, un vrai bonheur à implémenter

  13. 2F

    Un vrai bijoux!! Et niveau licence ? ai-je le droit de l’utiliser dans des projets pro ? ça serait sympa 😛

    Un grand merci

  14. 2F

    En l’intégrant j’ai un petit souci: je met la taille de mon slider à mes images pour quelles occupent toute la place mais lors des transition, j’ai une taille plus petite sur la découpe des images. Quand l’image se découpe, elle se fait sur une image plus petite….Que faire?

    • 2F

      En fait, c’est seulement lors des effets qui découpe les images….il découpe l’image de base et pas celle dont j’ai augmenter la taille et ça fait un truc bizarre…

  15. mathieu

    Bonjour Guillaume,
    j’utilise ce script de diaporama très efficace et très bien fait, mais je rencontre un problème dans le cas d’une utilisation de plusieurs diapoarama sur une même page.
    La lecture des diaporamas s’effectue les uns après les autres et boucle sur le dernier présent dans la page.
    est-ce normal ? y a t’il quelque chose à connaitre dans le cas d’une utilisation de plusieurs diaporama dans une même page ?
    Merci beaucoup pour ce travail.

  16. Benjamin

    Bonjour,
    je rencontre également les mêmes difficultés.
    J’imagine pouvoir redoublé le js et modifier tous les ID et les class, mais n’y a t’il pas une façon plus « propre » ?

    Ceci étant dit, merci pour ce script, excellent !

  17. patrice

    Salut,

    ton module est super !!!

    Petite question, j’ai voulu rendre l’affichage dynamique.
    J’ai créer différent bouton avec différentes valeures qui indique des répertoires d’images différents.
    J’obtiens bien en retour le code ul, li correspondant au contenu de mes différents répertoires mais elles s’affiche les unes en dessous des autres sans prendre en compte le module (css, js).

    Faut-il absolument recharger toute la page pour que les scripts soient pris en compte ou peut-on recharger seulement la div et dans ce cas comment faire pour que le module fonctionne ?

    Merci.

    • Gui
  18. Aurelien

    Bonjour, super travail sur ce diaporama, je souhaite m’en servir mais il ne marche pas sous sous ie8. La démo en ligne marche très bien mais pas en local, pourriez vous m’aider, merci

    • Marc, TheBuzzer

      ie8 occasionne plusieurs problèmes à tout niveau, c’est le pire fureteur sur le marché et que Microsoft a fait, je suggère souvent de passer vite à la version 9 de ie car ie8 est très instable!

      Et toujours avoir un autre fureteur pour tester le tout, firefox en autre!

      • Aurelien

        Merci de la réponse, il marche parfaitement sous ie8 en ligne.

1 2 3 4

Laisser une réponse à Dom


Post shadow