jDiaporama v3 : le diaporama jQuery est de retour !

Publié par Gui dans jQuery, Tutoriels

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

1 2 3 4
  1. Olivier

    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 ?

  2. fran

    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…

1 2 3 4

Laisser une réponse à guillaume


Post shadow