Plugin Cycle - Paramétrage

in

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-2').cycle();

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 
};