jDiaporama v3 : le diaporama jQuery est de retour !

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 !