Erwan Tanguy

Consultant Visibilité Web, veille, Réseaux sociaux et SEO

Accueil > Actualités > Diaporama simple en jQuery

Diaporama simple en jQuery

dimanche 20 février 2011, par

Voici un diaporama assez simple, qui nécessiterait un travail supplémentaire pour rendre les effets plus subtiles, mais qui a l’avantage d’être très léger avec quelques lignes de css et de jQuery. Pour voir la totalité du code il suffit d’afficher le code source de la page, tout est accessible.

Dans le jQuery, nous écrivons trois actions.

La première action est celle du survol des vignettes :

$('#diaporama #vignette img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
}, function() {
$(this).stop().animate({ "opacity": .5 });
});

L’opacité de la vignette survolée est ainsi à 100% lorsque la souris est sur l’image et reviens à 50% ensuite. Il faut bien entendu spécifier dans le css une opacité à 50% au départ.

La deuxième action est celle du clic sur la vignette pour faire apparaître dans le diaporama l’image correspondant.

Les vignettes et les images ont la même classe, sous cette forme "ix" ou x correspond en px à la distance entre l’image et le bord de la balise contenant toutes les images. Les images ici ont toutes une largeur de 400px, les classes sont donc par ordre "i0", "i400", "i800", "i1200"...

$('#diaporama #vignette p img').click(function(){
var img = $(this).attr('class');
var width = img.slice(1);
$('#diaporama p#image').css('left', '-' + width + 'px');
});

Avec jQuery, nous récupérons dans la variable img la valeur de la classe. Dans la variable width, nous ne gardons de la variable img que le chiffre, on retire le "i" avec slice. Et enfin il suffit d’attribuer une nouvelle valeur en négatif au left pour déplacer nos images. Pour ne pas voir ce qui dépasse du cadre, c’est-à-dire toutes les autres images qui sont présentes, il est indispensable d’utiliser un "overflow : hidden" et pour que la valeur de left soit active il faut définir la balise avec une position.

La troisième action concerne les flèches à gauche et à droite des vignettes, pour se déplacer dans la liste des vignettes.

$('#diaporama #vignette>img').click(function(){
var vignette = $('#diaporama #vignette p#defile').css('left');
var justTheNumber = parseFloat(vignette);
var uom = vignette.slice(-2);
if (this.id == 'previous') {
justTheNumber += 100;
} else {
justTheNumber -= 100;
};
$('#diaporama #vignette p#defile').css('left', justTheNumber + uom);
});

Pour déplacer la balise contenant les vignettes, il est nécessaire de récupérer la valeur du left au moment du clic pour pouvoir ensuite la modifier. On récupère ensuite avec parseFloat unique le chiffre et avec slice uniquement le px. Ensuite on ajoute ou enlève du left la largeur d’une vignette.
Il faudrait, pour bien cadrer cela, limiter ce déplacement une fois arrivé au bord gauche ou droit de la balise contenant les vignettes. Là je n’ai pas eu le temps de le faire.

Erwan Tanguy | réalisation pour formation jQuery

Voir en ligne : http://www.erwantanguy.fr/diaporama.html