Plugin JQuery que je connaissais depuis quelques temps déjà : Cycle. Cycle est plugin permettant de faire très simplement un diaporama de photos (ou d’images) avec JQuery.  27 effets de transitions sont disponibles avec le plugin de base et encore plus en le couplant avec le plugin JQuery.Easing.

Voir une démo en live du plugin Cycle (tous les effets sont testables directement à partir de la liste déroulante).

demo du plugin JQuery Cycle

Voici donc comment mettre en place le plugin le plus simplement :

On commence par charger le framework JQuery et le plugin Cycle (il faut que ce soit dans cet ordre) :

1
2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.js"></script>

Ensuite il faut, dans le code html, insérer toutes les images que l’on veut dans le diaporama. Il faut que ces images soit les une à la suite des autres dans un bloc (<div> de préférence) ayant un id (ici l’id est diapo)

1
2
3
4
5
6
7
8
9
10
11

<div id="diapo">
	<img src="2.jpg" alt="" />
	<img src="3.jpg" alt="" />
	<img src="4.jpg" alt="" />
	<img src="5.jpg" alt="" />
	<img src="6.jpg" alt="" />
	<img src="7.jpg" alt="" />
	<img src="8.jpg" alt="" />
	<img src="9.jpg" alt="" />
	<img src="10.jpg" alt="" />
</div>

Enfin il faut initialiser le plugin dans le code JavaScript de la page (soit un fichier externe soit directement dans la page) en indiquant dans le selecteur l’id du bloc contenant les photos. J’ai ajouté deux attributs : fx qui permet de choisir l’effet de transition (voir la page de démo pour la liste des effets disponibles) et timeout qui permet de définir la vitesse de défilement des photos.

1
2
3
4
5
6

$(document).ready( function () {
	$('#diapo').cycle({ /* #diapo signifie "le bloc ayant diapo comme id" */
    		fx:    'toss', /* effet choisi (voir la liste deroulante ci-dessous) */
    		timeout: 3000 /* temps en millisecondes (ici 2 secondes) entre chaque photo */
    	});
});

Le plugin JQuery.Cycle est disponible en téléchargement ici.

Pas encore de billet sur le même sujet !

Pour cette petite sélection de la semaine, je te propose une flopée de plugins JQuery.  Je reviendrai peut-être plus précisément sur un ou plusieurs dans le cadre des tutoriels sur les plugins JQuery.

- Un des plus connus (que j’ai vu sur pas mal de site) : Cycle. Ce plugin permet de faire un diaporama de photos. Couplé avec le plugin easing (qui permet divers effets de mouvement) plusieurs effets de transition sont proposés (fondu enchainé, rotation de l’image, défilement vers la droite). Il est également possible d’automatiser le défilement ou de permettre le contrôle au clic.

- ImageSwitch propose à peu près les mêmes fonctionnalités que Cycle. Mais avec, en plus, la possibilité de contrôler à distance l’effet. De plus il propose des effets de transitions différents de Cycle. Sur le blog du créateur du plugin, on peut également trouver un post qui donne 8 exemples d’utilisation du plugin ImageSwitch. Je pense que je reviendrai bientôt sur l’utilisation de ce plugin (avec probablement une utilisation sur mon blog).

- Pas vraiment un plugin, mais un exemple d’utilisation (avec des explications) de JQuery pour la création d’une carte intéractive. Ca montre qu’on peut se passer de flash pour faire des belles choses qui bougent ! Les explications se trouvent sur le site Newmediacampaigns.com et l’exemple par ici.

- Le plugin JQuery Checkbox, permet de personnaliser l’affichage des case à cocher (checkbox) et des bouton radio des formulaires. Très simple d’utilisation. Pas grand chose de plus à dire à part te montrer un aperçu…

Pas encore de billet sur le même sujet !