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 :
52 commentaires
Laisser une réponse
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
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