Répondre au commentaire

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

Connexion utilisateur

Sujets récents

Partenaires