Gallerie simple: avis sur le codage
Bonsoir,
Après une semaine de cours intensifs en JQuery (il y a 1 semaine de cela) et la lecture de pas mal de doc je me suis lançé dans la création d'une gallerie.
La gallerie est codée par moi-même sans copier/coller de code externe.
Alors je voudrais vous demander si la manière de coder vous semble correcte.
J'entends par là, est-ce que j'utilise bien la syntaxe et l'esprit JQuery dans la gestion des évenements dans ma galerie.
Descriptif:
- Au survol des mignatures l'opacité disparaît;
- Au click d'une miniature celle-ci remplace la grande;
- L'appel aux deux fonctions de traitement en dehors
$(document).ready(function()
Résultat visible sur http://myspace.voo.be/rarrabito/#14
A propos ne faite pas attention au style du tableau ou aux caractères. Je me suis focalisé sur le JQuery et rien d'autre pour mon test.
Voici le code:
Code:
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> |
