jQuery - Plugin Cycle

jQuery Plugin Cycle

J'ai le plaisir de vous présenter l'un des meilleurs plugins jQuery à savoir le fameux plugin cycle. Celui-ci va vous permettre de créer, de manière très simple, des diaporamas d'images ou slides de texte avec des effets vraiment bluffant. De plus, le plugin jQuery Cycle offre un nombre impressionnant de paramètres qui vont vous permettre de personnaliser à souhait votre "cycle". Mais pour vous donner l'eau à la bouche voici quelques exemples qui valent mieux qu'un long discours.

Demos Plugin Cycle

Cycle - Zoom

Cycle - Shuffle

Cycle - Fade

Cycle - TurnDown

Cycle - curtainX

Cycle - scrollRight

jQuery Cycle - Les effets disponibles

Retrouvez l'incroyable liste des effets cycle disponibles sur la page cycle effects demos (cliquer sur le nom d'un effet pour visualiser la démo)

jQuery Cycle - Les références

Retrouvez toute la documentation complète (en anglais) du plugin cycle sur le site de son créateur malsup.com/jquery/cycle

Plugin Cycle - Installation

jQuery Plugin Cycle - Comment l'installer ?

Pour faire fonctionner le plugin jQuery Cycle, il faut d'abord installer jQuery. Ensuite il faut télécharger le plugin Cycle qui correspond à votre besoin en cliquant sur le lien correspondant et en enregistrant le fichier .js grâce à la commande Fichier/Enregistrer sous (Ctrl+S) de votre navigateur internet. Si vous ne savez pas lequel choisir, nous vous conseillons le premier de la liste qui contient toutes les transitions et qui a été compressé pour alléger au maximum vos pages web.

Télécharger le plugin jquery cycle sur le site du créateur ou sélectionner une version ci-dessous correspondant à la version 2.97 du plugin.

Plugin Cycle Core avec toutes les transitions / effets disponibles

Plugin Cycle Core (avec seulement l'effet fade)

Plugin Cycle Lite (version avec fonctionnalités allégées)

Après avoir téléchargé le plugin cycle, il faut indiquer dans votre page HTML que vous souhaitez l'utiliser (pour pouvoir le charger à l'affichage de votre page). Comme pour jQuery, c'est au niveau de la balise head que vous devez inclure le plugin cycle : 

<head>
 <title>jQuery Plugin Cycle</title>                                        
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.cycle.all.min.js"></script>
 <script type="text/javascript">
   //ici j'insère mon propre code JavaScript
 </script>                                                      
</head>

Il est important de noter l'ordre de chargement des scripts. En effet, le plugin cycle a besoin de jquery pour fonctionner et donc le chargement de jquery doit se faire avant celui de cycle.

jQuery Plugin Cycle - Comment débuter ?

Le plugin cycle fournit une méthode appelée cycle qui sera appliquée sur un élément dit "conteneur". Chaque élément "fils" du conteneur devient alors un "slide". Essayons par exemple de créer un cycle à partir d'une liste d'images. Il faut donc placer notre liste d'images dans un conteneur par exemple un élément HTML DIV.

Cycle - Le code HTML

<div id="monCycle">
	<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 - Les styles CSS

A placer dans la balise head. Pour que les effets de votre cycle fonctionnement correctement, il est important de spécifier une taille (width et height) à votre conteneur et à vos slides

<style>
#monCycle {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 
 
#monCycle img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
} 
</style>

Cycle - Le code JavaScript

<script type="text/javascript">
  $(function(){
    $("#monCycle").cycle();
  });
</script>

Cycle - Le résultat

Cycle - modifier le contenu des slides

Le plugin cycle accepte quasiment tout type de contenu comme slide. Vous pouvez, par exemple, ajouter du texte, des images, des liens, ...puisque les éléments HTML de type DIV sont acceptés comme slide.

Contenu

Les slides du plugin cycle peuvent être contruits avec des contenus complexes comme du texte, image, etc.... puisque les éléments HTML de type DIV sont acceptés comme slide. Retrouvez des exemples sur le site en anglais.

Paramétrage

Le plugin cycle offre des possibilités de paramétrage quasiment sans limite.

Extension

Les fonctionnalités du plugin cycle peuvent être étendues grâce aux plugins jQuery Easing et Metadata.

Les autres plugins

Découvrez les autres plugins du créateur du plugin cycle.

 

$('#cycle-7').cycle({ 
    fx: 'scrollLeft',
    speed: 1000,
    timeout: 7000
});

Code HTML

<div id="cycle-7" class="cycle">
 <div>
  <h3>Contenu</h3>
  <p> Les slides du <strong>plugin cycle</strong> peuvent être contruits avec des contenus complexes 
  comme du texte, image, etc.... puisque les éléments HTML de type <strong>DIV</strong>
  sont acceptés comme slide. Retrouvez des <a href="http://malsup.com/jquery/cycle/int2.html">exemples</a> sur le site en  anglais.</p>
 </div>
 <div>
  <h3>Paramétrage</h3>
  <p>Le <strong>plugin cycle</strong> offre des possibilités de paramétrage quasiment sans limite.</p>
 </div>
 <div>
  <h3>Extension</h3>
  <p>Les fonctionnalités du <strong>plugin cycle</strong> peuvent être étendues grâce aux plugins jQuery <a href="http://gsgd.co.uk/sandbox/jquery/easing/">Easing</a> et <a href="http://plugins.jquery.com/project/metadata">Metadata</a>.</p>
 </div>
 <div>
  <h3>Les autres plugins</h3>
  <p>Découvrez les <a href="http://malsup.com/jquery/">autres plugins</a> du créateur du plugin cycle.</p>
 </div>
</div>

Cycle - modifier l'effet de transition

Pour modifier l'effet de votre cycle, vous avez 2 possibilités : 



$('#cycle-1').cycle('zoom');




$('#cycle-2').cycle({ 
    fx: 'scrollDown' 
});

Cycle - modifier la vitesse et la fréquence des transitions

Le plugin cycle vous offre la possibilité de paramétrer la vitesse de vos transitions (paramètre speed) ainsi que leur fréquence (paramètre timeout). Plus précisément, le paramètre speed représente le durée en millisecondes de votre transition, alors que le paramètre timeout représente le délai en millisecondes entre 2 transitions. 


$('#cycle-3').cycle({ 
    fx: 'scrollLeft', 
    speed:    2500
});




$('#cycle-4').cycle({ 
    fx: 'scrollDown', 
    speed:    300, 
    timeout:  3000
});

A noter que pour annuler le défilement auto, il faudra positionner le paramètre timeout à 0.

Cycle - les autres options usuelles

Le plugin cycle offre un nombre impressionnant de paramètres pour personnaliser son cycle. Parmi eux, le paramètre pause et le paramètre random sont couramment utilisés. Le paramètre pause permet de stopper le défilement des slides tant que la souris de l'utilisateur est sur un slide. Le paramètre random permet d'afficher les slides dans un ordre aléatoire. 


$('#cycle-5').cycle({ 
    fx: 'turnDown', 
    pause: 1
});



$('#cycle-6').cycle({ 
    fx: 'wipe', 
    random: 1
});

Plugin Cycle - Paramétrage

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

Plugin Cycle - Démos avancées

Retrouvez nos exemples d'utilisation du plugin jQuery Cycle.

Plugin Cycle - Pagination et boutons précédent / suivant

Plugin Cycle - Comment paramétrer des boutons précédent/suivant ?

Le plugin cycle vous offre la possibilité de contrôler le défilement des slides en définissant des boutons précédent / suivant. Il suffit pour cela d'utiliser les paramètres next et prev pour définir les sélecteurs CSS qui correspondent à vos boutons. Voici quelques exemples :

Cycle - Boutons Précédent / Suivant

Pas de défilement auto (timeout=0)

$('#cycle-1').cycle({ 
    fx: 'scrollHorz',
    timeout: 0,
    next: '#next',
    prev: '#prev'
});

Cycle - Plusieurs Boutons Préc./Suiv.


$('#cycle-2').cycle({ 
    fx: 'toss',
    timeout:3000,
    next: '.next',
    prev: '.prev'
});

Cycle - Clic pour suivant


$('#cycle-3').cycle({ 
    fx: 'growY',
    timeout: 0,
    next: '#cycle-3',
});

Exécuter un traitement (callback) lors du clic sur un bouton préc./suiv

Le plugin cyle vous offre également la possibilité d'exécuter un traitement personnalisé lors du clic sur un bouton préc./suiv. Ce traitement sera exécuté juste avant le lancement de l'animation. Pour cela, il suffit d'utiliser la paramètre prevNextClick pour définir la fonction qui contient votre traitement.

Cycle - Boutons Préc./Suiv et callback

Dans exemple, nous avons utilisé le paramètre prevNextClick pour redéfinir dynamiquement les effets de transitions de notre cycle en fonction du numéro de slide (s'il est pair ou impair) et en fonction du bouton d'activation du slide (précédent ou suivant).

Code JavaScript


$('#cycle-4').cycle({ 
    timeout: 0,
    next: '#nextCall',
    prev: '#prevCall',
    prevNextClick: traitement
});

function traitement(isNext, zeroBasedSlideIndex, slideElement){
// l'objet this représente ici les options de votre cycle
// par exemple, il est donc possible de changer dynamiquement l'effet de votre cycle
   if(zeroBasedSlideIndex%2){
	this.fx=[isNext ? 'turnLeft' : 'turnDown'];
   } else {
	this.fx=[isNext ? 'turnUp' : 'turnRight'];
   }
}

Plugin Cycle - Comment ajouter des boutons de pagination ?

Pour ajouter des boutons de paginations, il suffit de définir au niveau du paramètre pager le sélecteur CSS de l'élément qui va contenir vos liens de paginations.

Pagination par défaut

Cycle - Pagination

Pas de défilement auto (timeout=0)
 

$('#cycle-5').cycle({ 
    fx: 'uncover',
    timeout: 0,
    pager: '#nav'
});

Code HTML

<div id="cycle-5" class="cycle">
 <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>
<div id="nav"></div>

Créer votre propre pagination

Le plugin cycle vous offre la possibilité de construire vos propres éléments de pagination grâce au paramètre pagerAnchorBuilder.

Cycle - Pagination créée dynamiquement

La fonction définie par pagerAnchorBuilder sera exécutée pour chaque slide. Dans notre exemple, nous créons pour chaque slide, un lien avec la même image mais de taille plus petite.

Cycle - Pagination personnalisée

Dans cet exemple, nous ne créons pas d'éléments pour la pagination mais utilisons des éléments existants. Pour chaque slide, nous utilisons la fonction pagerAnchorBuilder pour définir le sélecteur CSS de l'élément qui va servir à afficher le slide. De plus, nous avons également utiliser le paramètre pagerEvent pour modifier l'évènement qui va déclencher le changement de slide. Désormais nous n'aurons plus besoin de cliquer mais simplement de survoler avec le souris. Pour finir, nous avons également positionné le paramètre pauseOnPagerHover à 1 pour stopper le défilement du cycle lorsque la souris se trouve sur un lien de pagination.

Cycle - Pagination personnalisée bis

Voyage dans les îles

Voyage dans les îles

Notre expédition a commencé au départ de la plage de l'hôtel. Ensuite nous avons pris le bateau et longer la côte pour rejoindre l'aéroport. La nature était sublime. Arrivés à l'aéroport, nous avons pris l'avion pour rentrer. Depuis l'avion, la vue était vraiment magnifique.