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,
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 ?
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! 😉
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 !
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
J’ai rencontré ce problème avec la première version, je l’avais corrigée. Lorsque j’ai installé la seconde version, je n’ai plus réussi à corriger ce problème. Il n’est pas vraiment important, mais ça m’énerve à un point… Je comprends la frustration! Le créateur du diaporama m’avait donné cette adresse pour trouver la solution. C’est là que j’avais trouvé la première.
http://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome
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 !
J’ai corrigé le problème dans ma version, je vais soumettre la correction au développeur pour l’ajouter à la prochaine version!
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…
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 !!!
il faut incrémenter un id dans le li :
<img …
<img …
…
il faut incrémenter un ‘id’ dans le ‘li’ :
id= »jDiaporama_image_1″
id= »jDiaporama_image_2″
…
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?
En faite c’est réglé ! Merci !
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
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.
Merci pour ce tutorial.
Très bien fait ton Diaporama. 🙂
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.
Oups, j’ai glissé… J’ai oublié le plus important, tout mes remerciements, un vrai bonheur à implémenter
Un vrai bijoux!! Et niveau licence ? ai-je le droit de l’utiliser dans des projets pro ? ça serait sympa 😛
Un grand merci
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?
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…
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.
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 !
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.
Hum je ne suis pas sûr de t’avoir suivi, mais changer en live le code html produit par le script risque effectivement de ne plus le faire fonctionner.
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
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!
Merci de la réponse, il marche parfaitement sous ie8 en ligne.