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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
| <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gallerie photos en JQuery ver 1.0</title>
<style type="text/css">
table{
border:separate;
}
td{ /* Dimensionnement des cellules et ajout d'une couleur intérieur */
vertical-align: middle;
height:70px;
width:85px;
background-color: #2E4A9D;
}
#imgBigOne{ /* Positionnement de la grande image */
position:relative;
left:420px;
top:20px;
}
.imgMin{ /* Par défaut l'opacité des miniatures est mise à 0.5 */
opacity: 0.5;
}
.imgOpacity{ /* Au survol de la miniature l'opacité disparait */
opacity: 1;
}
</style>
<!-- Je me link au plug in JQuery via Goofgle -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table>
<caption>Ma première gallerie en JQuery</caption>
<tr>
<td><img id="imgMin1" class="imgMin" src="Miniatures/Rz_103am.jpg"/></td>
<td><img id="imgMin2" class="imgMin" src="Miniatures/Rz_36m.jpg"/></td>
<td><img id="imgMin3" class="imgMin" src="Miniatures/Rz_151am.jpg"/></td>
<td><img id="imgMin4" class="imgMin" src="Miniatures/Rz_112am.jpg"/></td>
</tr>
</table>
<img id="imgBigOne" src="ImagesG/Rz_103a.jpg"/>
<script type="text/javascript">
(function($)
{
$(document).ready(function()
{
$('.imgMin').hover(changeBackground,changeBackground); // Sur passage de la souris l'opacité est réduite
// pour ce faire j'appelle ma fonction changeBackground
$('img').click(function() // Au click d'une miniature j'appelle la fonction chnageBigImg en passant en paramètre
{ // la valeur de l'id de l'image cliquée
var idValue=$(this).attr('id');
changeBigImg(idValue);
});
});
function changeBackground(){
$(this).toggleClass('imgOpacity'); // Avec ToggleClass j'alterne les valeurs de l'opacité
// en fonction de la présence de la souris ou non
};
function changeBigImg(idValue)
{
switch (idValue) // Avec une condition switch je détermine la photo à afficher
{
case ('imgMin1'):
$('#imgBigOne').attr('src','ImagesG/Rz_103a.jpg');
break;
case ('imgMin2'):
$('#imgBigOne').attr('src','ImagesG/Rz_36.jpg');
break;
case ('imgMin3'):
$('#imgBigOne').attr('src','ImagesG/Rz_151a.jpg');
break;
case ('imgMin4'):
$('#imgBigOne').attr('src','ImagesG/Rz_112a.jpg');
break;
};
};
}) (jQuery);
</script>
</body>
</html> |
Gallerie simple: avis sur le codage
Répondre avec citation
.
Partager