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 !
89 commentaires
Laisser une réponse

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 ?
Bonjour et bravo pour le partage des connaissances…
Je suis parvenu à mettre plusieurs diaporamas sur une même page. Mais je ne souhaiterais qu’un seul diaporama choisi en fonction de la photo sélectionnée sur une autre page. A chaque photo correspond un diaporama. Je parviens à afficher tous les diaporamas mais je ne veux que celui qui correspond à la photo. En programmation ce serait facile (select case , exit sub) mais là, tous les diaporamas s’activent bien évidemment malgré un lien direct de la photo vers le diaporama (page#diaporama1)…
Une solution simple ? Merci d’avance…