Afficher la premiere image d'une galerie.

**sunshine59** · 26/03/2011, 13h20

Bonjour à tous,

voici mon probleme, j'ai suivi un tutoriel pour creer une mini galerie en jquery. mon seul probleme c'est que ce tuto ne dit pas comment laisser afficher la premiere image.
je ne sais pas si vous avez compris je vous laisse mon code :
Je voudrais que : plonge1.jpg s'affiche sur la page directement sans que l'on est besoin de cliquer sur son icone. Merci d'avance.

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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script langage="javascript">
$(document).ready(function(){
$("#galerie_big img").hide();
$("#galerie a").click(function(){
 
if (
$("#" + this.rel ).is(":hidden")){
$("#galerie_big img").hide();
$("#" + this.rel).show();
}
 
});
});
 
</script>
</head>
 
<body background-color="transparent">
<table width="718" height="193" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="19" colspan="6">&nbsp;</td>
</tr>
<tr>
<td width="212" align="center"><div align="right"><img src="clement/activitetouristiques/sagara.png" width="145" height="115" /></div></td>
<td width="22" height="87" align="center">&nbsp;</td>
<td colspan="4" align="left" valign="middle"><span class="soustitre"> Centre de plongée sous-marine de l’ile de Kalà</span></td>
</tr>
<tr>
<td height="87" colspan="5" align="center"><p class="texte">Pour plonger en mer d’Oman, venez découvrir la faune et la flore sous-marine qui borde l’ile de Kalà, visiter les épaves qui jalonnent nos fonds sous-marins, profiter des plaisirs de la plongée sous-marine au cœur de cette eau turquoise, passer les niveaux de plonger et recevez une formation personnalisée. </p>
<p class="texte">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Le <a href="http://www.cote-bleue-plongee.com/club-plongee/accueil.html">Kala Klinga</a> situé sur la plage de l’ile de Kala<em> au bord de la mer d’Oman </em>vous fera découvrir tous les plaisirs subaquatiques de la plongée sous-marine, que vous soyez débutant ou déjà expert...</p></td>
<td width="243" align="center" valign="middle"><div id="galerie">
<table width="230" border="0">
<tr>
<td align="center">
<div id="galerie_big">
<img id="img1" src="clement/activitetouristiques/plonge1.jpg" />
<img id="img2" src="clement/activitetouristiques/plonge2.jpg" />
<img id="img3" src="clement/activitetouristiques/plonge3.jpg" /> </div>
</td>
</tr>
<tr>
<td align="center"> <div id="galerie_nav">
<a rel="img1" href="#"> <img src="clement/activitetouristiques/plonge1min.jpg" /></a>
<a rel="img2" href="#"> <img src="clement/activitetouristiques/plonge2min.jpg" /></a>
<a rel="img3" href="#"> <img src="clement/activitetouristiques/plonge3min.jpg" /></a> </div>
 
 
</td>
</tr>
</table> </div>
</p>
</td>
</tr>
</table>
</body>
</html>

**NoSmoking** · 26/03/2011, 14h37

Bonjour,

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
  $("#galerie_big img").hide();
  $("#galerie a").click(function () {
    if ( $("#" + this.rel).is(":hidden")) {
      $("#galerie_big img").hide();
      $("#" + this.rel).show();
    }
  });
  // affiche la premiere image
  $("#galerie_big img").eq(0).show();
});

profites en pour supprimer le DOCTYPE en trop en plein dans BODY

**kamclasse** · 26/03/2011, 15h01

bonjour,

essayé ceci ;

jquery :

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
 
<script langage="javascript">
$(document).ready(function(){
$("#galerie_big img").hide();
 
$("#galerie_big .selected").show();
$("#galerie a").click(function(){
 
if (
$("#" + this.rel ).is(":hidden")){
$("#galerie_big img").hide();
$("#" + this.rel).show();
}
 
});
});
 
</script>

html :

Code :

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

1
2
3
4
5
 
<div id="galerie_big">
<img id="img1" class="selected" src="images/org1.png" />
<img id="img2" src="images/org2.png" />
<img id="img3" src="images/org3.png" /> </div>

bon chance.