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 :
options
est un objet permettant de passer les paramètres de d'affichage et de fonctionnement du diaporama. Il s'agit de :
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(); } });