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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<meta name="description" content="Page type">
<title>Page type</title>
<style>
body {
background-color:#dcdcdc;
color:#000000;
font-family:sans-serif;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
}
h1,h2,h3,h4,h5 {
font-family:serif;
}
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
margin:0px;
padding:0px;
}
p {
padding:6px;
}
ul,ol,dl {
list-style:none;
padding-left:6px;
padding-top:6px;
}
li {
padding-bottom:6px;
}
</style>
<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
<script>
$(function(){
/*
* inverse la visibilité des boutons ZoomIn et ZoomOut
*/
function ZoomOK(){
if ($("#btnZoomIn").css("visibility") == "visible"){
$("#btnZoomIn").css("visibility","hidden");
$("#btnZoomOut").css("visibility","hidden");
} else {
$("#btnZoomIn").css("visibility","visible");
$("#btnZoomOut").css("visibility","visible");
}
}
/*
* zoomImage(boolZoom, pourcent, limite, millisecondes)
*
* Si boolZoom est true on agrandit width et height de poucent
* si la limite en pixels n'est pas dépassée.
*
* Si boolZoom est false on diminue width et height de poucent
* si la limite en pixels n'est pas dépassée.
*
* L'animation dure millisecondes.
*
* Comme on travaille avec une limite, après une série de ZoomIn et
* de ZoomOut la taille relative des images en sort complétement modifiée.
*
* Si on n'impose pas de limite, un ZoomOut peut faire disparaître l'image
* et le ZoomIn suivant donne une image à sa taille par défaut.
* Pour tester cet effet, mettre la limite à 0 dans btnZoomOut
*
* Exercice : utiliser un effet easing différent de l'effet par défaut (linear).
* plug-in Easing : http://gsgd.co.uk/sandbox/jquery/easing/
*/
$("#btnZoomIn").click(function() {
ZoomOK();
zoomImage(true, 20, 800, 4000); // +20% de la taille précédente, limiter à 800px, 4s
return false; // stop l'action par défaut et la propagation de l'événement
})
$("#btnZoomOut").click(function() {
ZoomOK();
zoomImage(false, 20, 200, 4000); // -20% de la taille précédente, limiter à 200px, 4s
return false; // stop l'action par défaut et la propagation de l'événement
});
function zoomImage(boolZoom, pourcent, limite, millisecondes) {
var obj = $("img.superZoom");
var n = obj.length - 1;
/*
* on sélectionne toutes les images ayant la class
* superZoom mais on traite chaque image séparément
*/
obj.each(function(i, item){
/*
* i est le numéro de l'image
* item est l'image
*/
// si boolZoom est true et que la limite de taille n'est pas dépassée
if (boolZoom){
if (($(item).width() < limite) && ($(item).height() < limite)){
$(item).animate({
width: "+=" + pourcent + "%",
height: "+=" + pourcent + "%"
}, millisecondes, function(){
// lorsque l'animation de la dernière image est terminée
if (i == n){
ZoomOK();
}
});
} else {
/*
* une image est hors limite
* diminuer de 1 le nb d'images
* si c'était la dernière image...
*/
n -= 1;
if (i == n){
ZoomOK();
}
}
} else {
// pour boolZoom false
if (($(item).width() > limite) && ($(item).height() > limite)){
$(item).animate({
width: "-=" + pourcent + "%",
height: "-=" + pourcent + "%"
}, millisecondes, function(){
// lorsque l'animation de la dernière image est terminée
if (i == n){
ZoomOK();
}
});
} else {
/*
* une image est hors limite
* diminuer de 1 le nb d'images
* si c'était la dernière image...
*/
n -= 1;
if (i == n){
ZoomOK();
}
}
}
});
}
});
</script>
</head>
<body>
<div>
<button id="btnZoomIn">ZoomIn</button> <button id="btnZoomOut">ZoomOut</button>
</div>
<div>
<p>
<img class="superZoom" style="width:480px; height:250px;" src="../images/imageTest.png"/>
</p>
<p>
<img class="superZoom" style="width:280px; height:150px;" src="../images/imageTest.png"/>
</p>
</div>
</body>
</html> |
