Comment paramétrer votre plugin cycle ?
Le plugin cycle vous offre 3 possibilités de paramétrage. Les 2 premières permettent de paramétrer indépendamment chaque cycle alors que la 3e permet d'impacter tous vos cycles en une seule fois.
Cycle - Paramétrage niveau JavaScript
La liste des paramètres souhaités est passée lors de l'appel à la fonction cycle(). On notera que les paramètres doit être déclarer entre crochets { fx: 'cover',pause: 1} et séparés par des virgules sauf pour le dernier paramètre de la liste.
|
|
$('#cycle-1').cycle({
fx: 'cover',
pause: 1,
random: 1,
speed:1500,
timeout:2000,
easing: 'easeInOutBack'
});
|
Cycle - Paramétrage niveau HTML
La liste des paramètres souhaités est passée au niveau de l'attribut class de l'élément HTML "conteneur", c'est à dire l'élément sur lequel nous allons appliquer la fonction cycle. Pour pouvoir utiliser ce type de paramétrage, il faut installer au préalable le plugin jQuery MetaData.
<div id="cycle-2" class="cycle { fx: 'cover',pause: 1,random: 1,speed:1500,timeout:2000,easing: 'easeInOutBack'}">
<img src="images/photo_iles_01.jpg" />
<img src="images/photo_iles_02.jpg" />
<img src="images/photo_iles_03.jpg" />
<img src="images/photo_iles_04.jpg" />
</div>
Cycle - Surcharge des paramètres par défaut
Vous pouvez surcharger les paramètres par défaut du plugin cycle en copiant les paramètres ci-dessous dans votre code JavaScript. Ensuite vous n'aurez qu'à modifier la valeur des paramètres en fonction de vos besoins. A noter que les modifications apportées impacteront l'ensemble de vos cycles.
Liste des paramètres par défaut du plugin Cycle
// Vous pouvez redéfinir ces paramètres selon vos besoins
//(tous les paramètres sont optionnels)
$.fn.cycle.defaults = {
fx: 'fade', //nom de l'effet pour les transitions (ou plusieurs effets séparés par des virgules, ex: fade,scrollUp,shuffle)
timeout: 4000, // délai en millisecondes entre 2 transitions (0 pour stopper de défilement auto)
timeoutFn: null, // fonction déterminant la valeur du timeout pour chaque slide: function(currSlideElement, nextSlideElement, options, forwardFlag)
continuous: 0, // mettre à 1 pour que les transitions s'enchaînent directement sans attente
speed: 1000, // vitesse de la transition (en millisecondes ou toute valeur compatible avec la fx)
speedIn: null, // vitesse de la 'in' transition (effet pour l'affichage du slide)
speedOut: null, // vitesse de la 'out' transition (effet pour la disparition du slide)
next: null, // sélecteur CSS de l'élément à utiliser pour passer au slide suivant
prev: null, // sélecteur CSS de l'élément à utiliser pour passer au slide précédent
prevNextClick: null, // fonction exécutée lors d'un clic sur prev/next juste avant l'animation : function(isNext, zeroBasedSlideIndex, slideElement)
pager: null, // sélecteur CSS de l'élément à utiliser comme conteneur pour la pagination
pagerClick: null, // fonction exécutée lors d'un clic sur un élément de pagination : function(zeroBasedSlideIndex, slideElement)
pagerEvent: 'click', // nom de l'évènement qui va déclencher l'animation du slide pour la pagination
pagerAnchorBuilder: null, // fonction qui permet de créer des éléments de pagination personnalisés : function(index, DOMelement)
before: null, // fonction exécutée avant chaque animation (scope contient l'élément à afficher): function(currSlideElement, nextSlideElement, options, forwardFlag)
after: null, // fonction exécutée après chaque animation (scope contient l'élément disparu): function(currSlideElement, nextSlideElement, options, forwardFlag)
end: null, // fonction exécutée lorsque le slideshow est terminé (à utiliser avec autostop ou nowrap options): function(options)
easing: null, // effet easing pour in et out transitions
easeIn: null, // effet easing pour "in" transition
easeOut: null, // effet easing pour "out" transition
shuffle: null, // coordonnées pour l'effet shuffle, ex: { top:15, left: 200 }
animIn: null, // propriétés définissants comment le slide doit apparaître
animOut: null, // propriétés définissants comment le slide doit disparaître
cssBefore: null, // propriétés CSS du slide avant son apparition (transition '"in")
cssAfter: null, // propriétés CSS du slide après sa disparition (transition "out")
fxFn: null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
height: 'auto', // hauteur du conteneur
startingSlide: 0, // numéro du slide à afficher en premier (la numérotation commence à zéro)
sync: 1, // 1 pour que les effets de transition in et out s'exécutent simultanément, 0 sinon
random: 0, // 1 pour un affichage aléatoire des slides (non applicable pour fx=shuffle)
fit: 0, // force slides to fit container
containerResize: 1, // resize container to fit largest slide
pause: 0, // 1 pour mettre en pause le défilement lors d'un survole de souris sur le slide
pauseOnPagerHover: 0, // 1 pour mettre en pause le défilement lors d'un survole de souris sur un lien de pagination
autostop: 0, // 1 pour stopper le défilement après X transitions (X == nombre de slides ou autostopCount)
autostopCount: 0, // nombre de transitions (optionally used with autostop to define X)
delay: 0, // additional delay (in ms) for first transition (hint: can be negative)
slideExpr: null, // expression for selecting slides (if something other than all children is required)
cleartype: !$.support.opacity, // true if clearType corrections should be applied (for IE)
cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
nowrap: 0, // true to prevent slideshow from wrapping
fastOnEvent: 0, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
randomizeEffects: 1, // valid when multiple effects are used; true to make the effect sequence random
rev: 0, // causes animations to transition in reverse
manualTrump: true, // causes manual transition to stop an active transition instead of being ignored
requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
requeueTimeout: 250 // ms delay for requeue
};
