Bloquer les boutons d'un défilement d'images

**bloodyweld** · 28/05/2008, 10h04

Bonjour à tous ^^,
je suis nouvelle inscrite sur ce forum mais j'y viens souvent pour trouver des réponses à mes questions.
Mais en ce moment je travaille sur quelque chose qui me pose un problème dont je n'ai pu trouver de solution.
Je me suis donc décidé à vous demander directement si vous pouviez m'y aider.

Voilà il s'agit d'un code pour faire défiler des images avec un bouton avant et un après.
Le code fonctionne mais j'aimerais inclure la possibilité pour n'importe qui d'ajouter des images dans ce défilement.
J'ai pour cela augmenté le nombre d'image maximum à 100 mais malheureusement comme pour le moment mon dossier n'en comporte que quatre et bien après la quatrième image ou avant la première mes boutons continuent de reculer ou d'avancer dans le vide alors que j'aimerais qu'il reste bloquer à la dernière ou la première image disponible pour le moment.

Mon but est que mon défilement d'image soit mis à jour facilement par une personne qui n'y connait rien en code et à qui je laisserais cette page.

(j'espère être assez clair)

Voici le code que j'ai utilisé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<HTML>
<head>
<script language="JavaScript"> 
<!-- 
 
function recomail() 
{ 
mail_str = "mailto:?subject=Regarde " + document.title; 
mail_str += "&body=Cette page peut t'interesser " + document.title; 
mail_str += " et elle est disponible à l'adresse : " + location.href; 
location.href = mail_str; 
 
} 
//--> 
</script> 
<title>Annonces de l'Eglise Adventiste du 7eme jour</title>
 
<SCRIPT LANGUAGE="JavaScript">
 
var compteur = 1        
var nbr_image = 100
 
 
 
function decremente(arg)                               
{
 
if (compteur == 0) 					
	{
	compteur = nbr_image				
	}
 
document.images[0].src = "annonce"+compteur+".jpg"	
 
compteur --	
}
 
 
 
 
function incremente(arg) 
{
compteur ++
 
	if (compteur == (nbr_image+1)) 			
	{
	compteur = 1
	}
 
document.images[0].src = "annonce"+compteur+".jpg"
}
 
  </SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">
<!--
body {
	background-color: #FFFFFF;
	background-image: url(titre.jpg);
	background-repeat: no-repeat;
}
a:link {
	color: #808080;
}
a:visited {
	color: #808080;
}
a:hover {
	color: #808080;
}
a:active {
	color: #808080;
}
.Style1 {font-family: Arial}
.Style2 {font-family: Arial; font-weight: bold; }
-->
</style></head>
 
 
 
 
 
<BODY>
  <FORM>
    <center>
      <p><br>
      </p>
      <p>&nbsp;</p>
      <div align="center">
        <table border="0" cellpadding="0" cellspacing="0" bordercolor="#11111111" bgColor="#DBDBDB">  
          <tr>
            <td align="center">		    <img src="annonce1.jpg" border="0">          </td>
          </tr>
          </table>
      </div>
      <p align="center"><br>
        <input type="button" value="precedent" onClick="decremente(this.arg)">                
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="suivant" onClick="incremente(this.arg)">
      </p>
       </div></td>
  </tr>
  <tr>
    <td><div align="center">
      <table width="485" border="0">
        <tr>
          <td width="273"><div align="center"><img src="print.GIF" width="16" height="14"> <span class="Style3 Style1"><strong><a href="javascript:self.print()">Imprimer </a></strong></span> </div></td>
          <td width="273"><div align="center"><img src="mail.gif"> <a href="javascript:recomail()" class="Style2">Envoyer cette page &agrave; un ami</a></div></td>
        </tr>
      </table>
    </div></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body> 
</html>

(Peut être pourra-t-il même servir à des personnes cherchant à créer le même système avec ma contrainte en moins ^^)

Merci d'avance quelque soit vos réponses.

(J'ai plutôt un niveau de débutant pour tout ce qui est programmation mais je n'ai pas peur de faire des efforts.
Ce code aussi simple qu'il puisse être m'a demandé beaucoup de temps à comprendre et à modifier.)

**E.Bzz** · 28/05/2008, 10h39

Bonjour,
et bienvenue sur Developpez.com

Si tu as directement le bon nombre d'images, tu ne devrais plus avoir à te poser cette question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var nbr_image = 0;
function NbImages() {
nbr_image = document.images.length-1;
}

avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="NbImages();">

pour pouvoir les compter une fois la totalité du document chargé ...

Si toutes les images de la page ne sont pas concernées, un critère permettra sûrement de les filtrer ...

A+

**le_chomeur** · 28/05/2008, 10h41

salut

tout dabord , il te faut donner un id a tes boutons suivant / précédent :
et vire également le this.arg il n'est pas utilisé dans ton script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" value="precedent" onClick="decremente()" id="suivant">

puis faire une vérification sur le véritable nombre d'image , utilises tu du php ?

si oui la vérification à faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 
var nbr_image = <?php echo $nbImage ?>;
var compteur = 1;
 
function decremente(arg)                               
{
compteur --
//Ici tu fais une boucle pour revenir a la dernière image 
if (compteur == 0) 					
	{
	compteur = nbr_image;				
document.images[0].src = "annonce"+compteur+".jpg";	
	}
// si tu veux bloquer le bouton :
if(compteur == 0){
document.getElementById('precedent').disabled = "disabled";
}
else{
document.getElementById('precedent').disabled = "enabled";
document.images[0].src = "annonce"+compteur+".jpg";
} 
 
 
 
}

voila les consignes et explications

**bloodyweld** · 29/05/2008, 11h45

@E.Bzz:: merci pour ton accueil et pour ta réponse mais en fait je cherche comment le réaliser avec un nombre de document inconnu.
Avec un nombre connu j'avais réussi à le faire fonctionner mais ça ne convenait pas à la personne qui m'a demandé de le faire et qui ne veut pas passer par le code pour ajouter une image T.T

le_chomeur: merci beaucoup.
Je pense que ça marche avec le bouton précédent mais lorsque j'essaye de le modifier pour le bouton suivant, il se bloque après la seconde image alors que mon dossier en comporte 5 pour le moment et qu'il devrait donc se bloquer après la cinquième et pas avant.

Peut être peux-tu m'aider encore pour faire fonctionner celui là s'il te plaît.
ça fait plusieurs jours que je suis dessus et j'avoue que sans aide là j'étais complètement perdue.

(Par contre je pense qu'il avait une petit erreur non ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" value="precedent" onClick="decremente()" id="precedent">

plutôt que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" value="precedent" onClick="decremente()" id="suivant">

pour le bouton précédent et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" value="suivant" onClick="incremente()" id="suivant">

c'est pour le bouton suivant.)

**E.Bzz** · 29/05/2008, 11h51

Envoyé par bloodyweld

en fait je cherche comment le réaliser avec un nombre de document inconnu.

Ben tu (le nav) le connais forcément, puisque c'est ceux présents dans la page (c'est l'équivalent du

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var nbr_image = <?php echo $nbImage ?>;

du Chomeur.

Mais bon, si tu ne VEUX pas le connaitre ...

A+

Bloquer les boutons d'un défilement d'images

JavaScript

Vue hybride

Discussions similaires

Partager

Partager