Fonctionnalités de la librairie jsFF

Documentation de la librairie jsFF : composant FadeSlideShow

La méthode jsFF.addFadeSlideShow(conteneur, images, options) permet d'initialiser un diaporama.

Elle prend 3 arguments :
  • conteneur (obligatoire) est l'identifiant d'un div chargé de recevoir le diaporama.
  • images (obligatoire) est un tableau javascript sur 4 colonnes représentant, respectivement :
    • le nom de l'image à afficher. (requis)
    • une URL qui sera invoquée si l'utilisateur clique sur l'image (optionel : chaine vide si non utilisée)
    • Un texte descriptif court (optionel : chaine vide si non utilisée)
    • Un texte descriptif long (optionel : chaine vide si non utilisée)
  • options est un objet permettant de passer les paramètres de d'affichage et de fonctionnement du diaporama. Il s'agit de :
    • dimensions : un tableau javascript constitué des largeur et hauteur du diaporama. ex: [200, 100].
    • displayMode : indique le mode de fonctionnement, et lui-même est constitué de 4 champs :
      • type : Fixe le mode de fonctionnement du diaporama. Il peut prendre les valeurs 'auto' qui provoque le démarrage automatique de l'animation ou 'manual' auquel cas le diaporama doit être commandé par un navigateur indiqué par l'option togglerid.
      • pause : Temps (en ms) écoulé avant le basculement d'image.
      • cycles : Nombre de cycles effectués en mode 'auto' avant l'arrêt de l'animation et déclenchement de l'évênement onTerminateCycle. Mettre la valeur 0 pour le désactiver.
      • wraparound : booléen indiquant si une animation en mode 'auto' pout être interrompue lors de l'action sur le navigateur.
    • persist : booléen permettant de stocker la position actuelle du diaporama dans un cookie afin de se repositionner sur la dernière image vue lors d'un rechargement de page.
    • fadeDuration : Temps (en ms) de l'animation de fondu-enchainé.
    • descReveal : Chaine fixant le fonctionnement de l'affichage des commentaires. Elle peut prendre la valeur 'onDemand' auquel cas, les commentaires ne seront affichés que lorsque l'utilisateur
    • togglerid : identifiant de la barre optionnelle de navigation. Cet élement doit être un DIV contenant au moins 3 éléments :
      • un élément de classe prev (DIV ou IMG) qui servira à se positionner sur l'image précédente.
      • un élément de classe next (DIV ou IMG) qui servira à se positionner sur l'image suivante.
      • un élément de classe status (DIV ) qui contiendra un texte affichant le cours du diaporama (image 1 / 5).
      Cette barre de navigation doit être fournie si l'option displayMode.type est fixée à 'manual' afin de permettre de se déplacer dans le diaporama.
  • Il est également possible de fournir dans cet objet des fonctions qui seront appelées lors de l'initialisation, du changement de page ou en fin de cycle:

  • onInit : déclenchée dès la fin de l'inialisation de l'objet.
  • onSlide : déclenchée après chaque transition d'image.
  • onTerminateCycle : déclenchée lorsque la fin du diaporama est atteinte (dans le cas où les champs type='auto' et cycles est différent de 0).

Exemple 1 : un diaporama avec descriptions cachées, sans navigateur, et ne s'arrêtant jamais : Exécuter...

jsFF.addFadeSlideShow('diaporama', [
	["fadeslideshow_img/diaporama1.jpg", "image 1", "./jsFF.html", "longue description image 1
sur plusieurs lignes"], ["fadeslideshow_img/diaporama2.jpg", "image 2", "", "longue description image 2"], ["fadeslideshow_img/diaporama3.jpg"], ["fadeslideshow_img/diaporama4.jpg", "", "", "longue description image 4"], ["fadeslideshow_img/diaporama5.jpg", "", "", "longue description image 5"] ], { dimensions: [980, 195], // /height of gallery in pixels. Should reflect dimensions of largest image displayMode: {type:'auto', pause:4000, cycles:0, wraparound:false}, persist: false, // remember last viewed slide and recall within same session? fadeDuration: 1500, // transition duration (milliseconds) descReveal: "onDemand", togglerid: '' });

Exemple 2 : un diaporama avec descriptions visibles et un navigateur, et s'arrêtant au bout de 2 cycles, puis disparaissant : Exécuter...

jsFF.addFadeSlideShow('diaporama2', [
	["fadeslideshow_img/diaporama6.jpg", "titre image 6", "", "longue description image 6"],
	["fadeslideshow_img/diaporama7.jpg", "titre image 6", "", "longue description image 7"],
	["fadeslideshow_img/diaporama8.jpg", "titre image 6", "", "longue description image 8"],
	["fadeslideshow_img/diaporama9.jpg", "titre image 6", "", "longue description image 9"]
], {
	dimensions: [980, 195], 				// /height of gallery in pixels. Should reflect dimensions of largest image
	displayMode: {type:'auto', pause:2000, cycles:2, wraparound:false},
	persist: false,							// remember last viewed slide and recall within same session?
	fadeDuration: 750,						// transition duration (milliseconds)
	descReveal: "always",
	togglerid: 'navigation',
	onInit: function() {
		jsFF.message('SlideShow : diaporama initialisé !!!!');
	},
	onSlide: function() {
		jsFF.message('SlideShow : Page changée : ' + this._curImage);
	},
	onTerminateCycle: function () {
		if (confirm('Supprimer le diaporama exemple 2 ?'))
			this.remove();
	}
});