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)

jQuery Cycle Plugin - compressé (20 KB)
jQuery Cycle Plugin - non compressé (32 KB)

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

jQuery Cycle Plugin Lite - compressé (5 KB)
jQuery Cycle Plugin Lite - non compressé (7 KB)

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>

<!DOCTYPE html>
<html>                                                            
<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">
	 $(function(){
	   $("#monCycle").cycle();
	 });
   </script>
 
<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>                                                      
</head>                                                           
<body>
	<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>
</body>                                                                 
</html>

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 :

soit passer en paramètre le nom de l'effet désiré sous forme de string
soit passer en paramètre un object option en modifiant la propriété fx avec l'effet désiré. Ce cas est plus général car il vous permettra par la suite de modifier plusieurs paramètres à la fois



$('#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
});

Ajouter un commentaire

Commentaires

Bonjour, comment faire pour

Par Anonyme, le jeu, 22/12/2011 - 13:06.

Bonjour,

comment faire pour mettre un div au dessus de l'animation car il se trouve tout le temps en dessous quand c'est animé.

Merci

répondre

Bonjour, Si tu mets ton div

Par yoja_admin, le jeu, 22/12/2011 - 16:07.

Bonjour,

Si tu mets ton div au dessus de celui du cycle ça devrait marché :

Sinon tu peux essayer de jouer sur la propriété margin-top du div cycle. A quoi ressemble ton code qui pose problème ?

répondre

Images se superposant

Par Anonyme, le ven, 01/07/2011 - 16:39.

Bonjour

Comment faire pour que les images se uperposent dans mon editeur html ? Elles défilent normalement sur un navigateur mais embouillent toute ma page en mode construction

répondre

Problème éditeur HTML

Par yoja_admin, le ven, 22/07/2011 - 13:19.

Quel genre d'éditeur utilisez vous pour la construction de vos pages HTML ?

A mon avis lorsque vous éditez votre page cela doit se faire en mode statique c'est à dire que le javascript ne doit pas être exécuté. Hors c'est le code javascript du plugin cycle qui gère l'affichage des images et notamment leur superposition. Sans cela les images s'affichent les unes à la suite des autres.

répondre

Connexion utilisateur

Sujets récents

Partenaires