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
Bonjour, je voudrais revenir sur le problème de défilement très rapide en cas de changement d’onglet. Avez-vous trouvé une solution pour corriger ce problème ?
Merci d’avance
Bonjour,
Merci pour le partage du code, très bien réalisé…
Cependant j’ai un petit soucis sur mon site car :
– mon menu déroulant apparaît en dessous du diaporama, comment le faire passer au premier plan?
– Sur IE, j’ai des problèmes d’affichages
Aperçu du site (version maquette) : http://www.village-montagne.com/test/fr/hiver/accueil/test.html
Si quelqu’un peu m’aider, merci d’avance!
Bonjour,
j’étais à la base à la recherche d’un diapo simple … mais de versions en versions ça se corse … 😉
Est-ce que la V1 et V2 de jDiapo a aussi les bugs de corrigés ?
Perso, je préfère la V2 …
Merci.
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);
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é.
Peut être que c’est dû aux différentes techniques de transition qui ne gèrent pas la transparence des images. Sous quel navigateur ?
De toute façon, pourquoi ne pas utiliser border-radius pour créer des coins arrondis, on ne fait plus ça avec des images ! 🙂
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?
Normalement le script est prévu pour supporter l’affichage de plusieurs diaporamas sur une seule et même page.
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?
Effectivement le script n’a pas été testé / mis à jour pour les versions de jQuery supérieures à 1.6
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.
Non, désolé, ce n’est actuellement pas possible.
Bonjour,
je n’arrive pas a télécharger la derniere version de jDiaporama est normal?
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 »
});
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
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
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?
very good
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 ?
Bonjour,
Je ne trouve plus les sources… pourriez-vous les remettre à dispo par hasard ?
Merci beaucoup
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.
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.
nice post
thanks