Forum « Slideshow: 4 images à la fois,.... »

Forum « Programmation Javascript » (archives)

Slideshow: 4 images à la fois,....

Envoyé: 13 octobre 2005, 6h04 par midiweb

salut, le code ci-dessous me permet d'afficher 4 miniatures á la fois et l'image agrandie à droite. Avec les boutons "Next" , Previous" je passe à une autre miniature.
Tout marche bien sauf que j'ai chaque fois autant de miniatures affichées qu'il y a d'images c.à.d 5, 6 , 7 images alors que j'en veux 4 à la fois puis les autres en cliquant. Comment y remédier ? Merci

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<script type="text/javascript">
var current = 0;
var width = 4;
var max = 4;
var prefixe = "mini_";
function previous(nb) {
showWindow(false);
current = current - nb;
if (current < 0) {
current = 0;
}
showWindow(true);
}

function next(nb) {
showWindow(false);
current = current + nb;
if (current > (max - width)) {
current = max - width;
}
showWindow(true);
}

function showWindow(show) {
for(i = current ; i < current + width ; i++) {
el = document.getElementById(prefixe+i);
if (el) {
el.style.display = show?'inline':'none';
}
}
}
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>Document sans nom</title>
</head>
<body>
<a href="javascript:previous(2)">previous</a>
<a id="mini_0" href="javascript:changeImage('Bilder/Portraits/grosse Bilder/maedchen1.jpg')"><img src="Bilder/Portraits/kleine Bilder/maedchen1.jpg"></a>
<a id="mini_1" href="javascript:changeImage('Bilder/Portraits/grosse Bilder/portrait-dame.jpg')"><img src="Bilder/Portraits/kleine Bilder/portrait-dame.jpg"></a>
<a id="mini_2" href="javascript:changeImage('Bilder/Portraits/grosse Bilder/maedchen-profil.jpg')"><img src="Bilder/Portraits/kleine Bilder/maedchen-profil.jpg"></a>
<a id="mini_3" href="javascript:changeImage('Bilder/Portraits/grosse Bilder/maedchen1.jpg')"><img src="Bilder/Portraits/kleine Bilder/maedchen1.jpg"></a>
<a id="mini_0" href="javascript:changeImage('Bilder/Portraits/grosse Bilder/maedchen1.jpg')"><img src="Bilder/Portraits/kleine Bilder/maedchen1.jpg"></a>
<a href="javascript:next(2)">next</a>
<img name="mainimage" src="Bilder/Portraits/grosse Bilder/maedchen1.jpg"></div>
</body>
</html>
[/code}