.png "image 1")
.png "image 2")
.png "image 3")
.png "image 4")
.png "image 5")
.png "image 6")
.png "image 7")
.png "image 8")
.png "vignette 1")
.png "vignette 2")
.png "vignette 3")
.png "vignette 4")
.png "vignette 5")
.png "vignette 6")
.png "vignette 7")
.png "vignette 8")
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.
$('#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.
$('#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.
$('#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.