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 !

88 commentaires

1 2 3 4
  1. james

    Bonjour,
    Alors déja je tiens a dire que le tuto est super bien fait, ça ma permis de comprendre plein de chose. Alors du coup je me suis lancé dans la conception d’une page avec 2 Diaporama mais pour une raison obscur, il n’y a que le 1er diaporama qui défile alors que le second reste statique. J’ai pouratn bien pris soin d’implenter 2 variable différente dans le script.

    var myDiapo1 = $(« .diaporama1″).jDiaporama(options);
    var myDiapo2 = $(« .diaporama2″).jDiaporama(options);

  2. Christophe

    Bonjour,
    j’utilise des images.png avec une partie transparente pour créer un bord arrondi. Le transparent ne fonctionne pas et s’affiche en noir. Y a t’il un paramétrage spécifique à réaliser pour que le transparent fonctionne.
    Merci pour la réponse et bravo pour le travail réalisé.

    • Gui
  3. damien

    bonjour,

    tout d’abord, ton diaporama est super, et ton site est très clair, merci!

    Je me pose la même question que James en juillet 2012, comment faire pour mettre 2 diaporamas sur la même page?

    • Gui
  4. Hiskills

    Bonjour,
    Suite à la mise à jour de mon WordPress, le script ne fonctionne plus. Je suppose qu’il est incompatible avec les nouvelles version de JQuery. J’ai en effet pu remarquer que dans les fichiers source, vous êtes resté à la version 1,6. Avez-vous éventuellement une version mise à jour?

    • Gui
  5. Xav

    Bonjour
    Est-il possible de configurer le script en mode « slide » pour le faire passer de la dernière à la première image dans le même sens et non faire défiler toutes les images rapidement dans le sens inverse pour revenir à la première ?
    Merci et bravo pour ce script.

  6. guillaume

    Bonjour,

    je n’arrive pas a télécharger la derniere version de jDiaporama est normal?

  7. Alain_42

    Bonjour Guillaume,

    Bravo pour ce Diaporama, mais j’ai un soucis, je veux afficher les slides en 800×600, mais certaines sont en format portrait.
    Pour celles en portrait la thumb et la slide restent en fond noir.

    dans script.js j’ai mis:
    var myDiapo = $(« .diaporama1″).jDiaporama({
    delay:10,
    theme: »border »,
    useThumbs: true,
    thumbsDir: rep_thumbs,
    width:800,
    height:600,
    constraintWidth: true,
    transition: »sliceBarsH »
    });

  8. Alain_42

    je reviens,

    après avoir effacé complétement mes photos de l’album et tout relancé ça fonctionne impec.(j’avais un peu bataillé pour uloader ces photos en portrait avec jQuery-fileupload)

    merci pour ce tuto

    Alain

  9. Thomas

    J’ai aussi un problème avec 2 diaporamas sur la même page.

    J’aurais voulu que le second commence après et que cela fasse un effet décalé avec le premier mais il manque un paramètre « wait » pour cela…

    J’ai réglé le 1er sur un delay de 2s et le second sur un delay de 4s. Cela fonctionne plus ou moins, mais on dirait que les 2 instances partagent les mêmes setinterval()… car il y a des décalages qui se créent et au final les delay ne sont pas respectés.

    Il faudrait pouvoir régler les 2 delay sur 2s et un nouvaeu paramètre wait sur 1s… peut être pour la v4 ?

    Merci encore pour ce script très sympa

  10. viny

    Merci pour le tuto;je viens de le découvrir!je voudrais savoir s’il y a une liste des différents thèmes disponible?

  11. wandersom

    Muito bom amigo me ajudou bastante,

    só estou com um probleminha, quando eu coloco ele em uma pagina e dou F5 a pagina carrega mas o slide aparece no rodapé ai ele pula para a posição correta questão de 2 ou 3 segundos ele pula para a posição, o que devo fazer para quando carregar a pagina o slide carregue na posição certa ?

  12. Anne

    Bonjour,

    Je ne trouve plus les sources… pourriez-vous les remettre à dispo par hasard ?

    Merci beaucoup

  13. Mo

    Bonjour,
    Je vous remercie pour ce diaporama.

    J’ai deux problèmes:
    1. j’aimerais beaucoup afficher les contrôles flèches, ainsi que le compteur d’images, à l’extérieur du diaporama et ce en permanence.
    2. J’ai énormément de mal à faire fonctionner le mode aléatoire. (J’ai sur plusieurs pages un diaporama « normal » et je voudrais mettre un diaporama aléatoire sur une seule page)

    Merci beaucoup pour votre réponse.

  14. Benoit Huchette

    Merci beaucoup pour ce tutoriel, j’ai pris beaucoup moi qui suis debutant.

    Je souhaite faire un diaporama du meme type mais avec des images de type SVG. (Suivant, Précédent uniquement) Ce sont des SVG complexes exportés d’un logiciel de CAO 3D. Le script est il compatible avec des image SVG?

    Combien de miniatures le script peux t’il gérer au maximum?

    Que ce passe t’il si il y en a trop? peut on faire « tourner » le bandeau des miniatures?

    Merci beaucoup de votre réponse.

  15. Olivier

    Bonsoir,
    Je trouve votre diaporama PHP très bien fait, mais je ne comprends pas où il faut renseigner les paramètres des variables.
    Le tutoriel de votre site semble correspondre à la version 2, et non à la version 3, je suis un peu perdu.
    Y-a-t’il un mode d’emploi quelque part ?

1 2 3

Laisser une réponse


Post shadow