fonction "cache/décache" pour galerie

**Auresky** · 20/09/2010, 13h39

Bonjour à tous,

Je suis en train de réaliser une gallerie d'image, l'idée, vous la connaissez, c'est de mettre des petits thumbnails les uns à côté des autres en réduit, et, quand on clique dessus, qu'il apparaisse en grand.

j'ai donc un <table> avec mes vignettes et plus loin, une div de destinations des grand format.

Le souçis, c'est que quand je clique sur 1 photo, elle s'affiche. Puis quand je clique sur 1 autre photo, elle s'affiche sans que la première disparaisse...

embêtant hein?!

Ma fonction JS:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
//------------------
function Swap( div_){
  var Obj = document.getElementById( div_);
  if( Obj){
    if( Obj.style.display=="")
      Obj.style.display="none";
    else
      Obj.style.display="";
  }
}
</script>

mon code pour les vignettes:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<table>
<tr>
 
<td><a href="#Photo1"  onclick="Swap('DIV_Photo1');">
<img src="images/photo1.png"  width="140" id="gallerie">
</a></td>
 
<td><a href="#Photo2"  onclick="Swap('DIV_Photo2');">
<img src="images/photo2.png"  width="140" id="gallerie">
</a></td>
 
</tr>
</table>

et enfin le code de la div de destination du grand format:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<table>
<tr>
<td>
<div id="DIV_Photo1" style="display:none" >
<img src="images/photo1.png" width="100%"></div>
 
<div id="DIV_Photo2" style="display:none" >
<img src="images/photo2.png" width="100%"></div>
</td>
</tr>
</table>

Vous pourriez m'aider? merci

**SpaceFrog** · 20/09/2010, 13h56

un id doit être unique sur la page
une action js decelnché par un href doit etre suivie d'une inhibition du href (return false)

ensuite il faut boucler sur les images à chaque click et tester si l'image de ma boucle est l'image cliquée et attribuer le display en conséquence

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
<script type="text/javascript">
//------------------
function Swap(imgactive){
var i=0;
curr=document.getElementById(imgactive)
while (pic=document.getElementById('DIV_Photo'+(++i))){
	pic.style.display = (pic==curr)?"":"none";
  }
}
</script>
</head>
 
<body>
<table>
<tr>
 
<td><a href="#Photo1"  onclick="Swap('DIV_Photo1');return false;">
<img src="img/1.png"  width="140" id="gallerie1">
</a></td>
 
<td><a href="#Photo2"  onclick="Swap('DIV_Photo2');return false;">
<img src="img/2.png"  width="140" id="gallerie2">
</a></td>
 
</tr>
</table>
<table>
<tr>
<td>
<div id="DIV_Photo1" style="display:none" >
<img src="img/1.png" width="100%"></div>
 
<div id="DIV_Photo2" style="display:none" >
<img src="img/2.png" width="100%"></div>
</td>
</tr>
</table>
 
 
 </body>
 
</html>

**Auresky** · 20/09/2010, 14h26

Envoyé par SpaceFrog

un id doit être unique sur la page
une action js decelnché par un href doit etre suivie d'une inhibition du href (return false)

ensuite il faut boucler sur les images à chaque click et tester si l'image de ma boucle est l'image cliquée et attribuer le display en conséquence

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
<script type="text/javascript">
//------------------
function Swap(imgactive){
var i=0;
curr=document.getElementById(imgactive)
while (pic=document.getElementById('DIV_Photo'+(++i))){
	pic.style.display = (pic==curr)?"":"none";
  }
}
</script>
</head>
 
<body>
<table>
<tr>
 
<td><a href="#Photo1"  onclick="Swap('DIV_Photo1');return false;">
<img src="img/1.png"  width="140" id="gallerie1">
</a></td>
 
<td><a href="#Photo2"  onclick="Swap('DIV_Photo2');return false;">
<img src="img/2.png"  width="140" id="gallerie2">
</a></td>
 
</tr>
</table>
<table>
<tr>
<td>
<div id="DIV_Photo1" style="display:none" >
<img src="img/1.png" width="100%"></div>
 
<div id="DIV_Photo2" style="display:none" >
<img src="img/2.png" width="100%"></div>
</td>
</tr>
</table>
 
 
 </body>
 
</html>

Tu marque un point!
Merci beaucoup!!

fonction "cache/décache" pour galerie

JavaScript

Discussions similaires

Partager

Partager