Après de longues et paisibles semaines de vacance bien méritées, Sans Sucre Ajouté revient en force avec un nouveau plugin jQuery !

Le plugin reprend le principe du tutoriel du diaporama, avec deux principaux ajouts :
- La lecture automatique du slide
- Possibilité d'ajouter des effets avec "easing"
[edit du 16/08/2011]
- Lecture en continu du slide

[edit du 17/08/2011]
- Possibilité d'activer/désactiver les flèches
- Possibilité d'activer/désactiver les boutons

[edit du 06/09/2011 - version 2]
- Suppression du slide avec la technique du margin
- Construction de la nouvelle méthode de slide
- Appel direct de l'image désirée

[edit du 12/10/2011]
- Correction de la lecture

[edit du 02/01/2012]
- Reprise de la lecture après interruption utilisateur.

[edit du 15/11/2012]
- Simplification du plugin (suppression des IDs).

[edit du 20/03/2013]
- Correction de la reprise automatique de la lecture.


Avec la version 2, slidePulpe s'accompagne d'une refonte graphique :

images/uploads/article_slidePulpe_v2.jpg

Comme à chaque fois, vous trouverez la bibliothèque jQuery ici et pour cette fois le plugin easing ici.

Les images utilisées proviennent de la sélection Hongkiat.

Voir la démo | Télécharger slidePulpe | Télécharger la source commentée

Utilisation du plugin slidePulpe

On reprend donc la même architecture que notre diaporama :

<div id="contenu">
<div id="galerie">
<div class="sucre"><img src="images/photo_1.jpg" /><p>Apophis</p></div>
<div class="sucre"><img src="images/photo_2.jpg" /><p>Hamarkhis</p></div>
<div class="sucre"><img src="images/photo_3.jpg" /><p>Dedoum</p></div>
<div class="sucre"><img src="images/photo_4.jpg" /><p>Menhyt</p></div>
</div>
</div>

On appelle maintenant le constructeur du slideshow sur notre galerie :

$(document).ready(function(){
$('#galerie').makeSlidePulpe();
});

A ce stade, notre slideshow fonctionne avec la lecture automatique (à noter que lorsque l'on clique sur un bouton ou une flèche, la lecture s'arrête). Afin de ne pas permettre cette dernière et/ou ajouter un effet de transition, il faut insérer les paramètres suivants :

$(document).ready(function(){
$('#galerie').makeSlidePulpe({
auto : false,
time : 3000,
transition : 2000,
effet : 'easeOutBack',
fleches : true,
boutons : true
});
});

Voici donc les 6 paramètres modifiables :
- La lecture automatique
- Le temps entre chaque changement (en millisecondes)
- Le temps de la transition (en millisecondes)
- L'effet désiré
- Activation/Désactivation des boutons
- Activation/Désactivation des flèches

A noter que tous les effets disponibles sont présentés sur le site du plugin Easing.

Vous savez maintenant mettre en place le plugin, pour plus de détails je vous laisse télécharger la source commentée.