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
| <script type="text/javascript">
$(document).ready(function() { //attend que le DOM soit prêt pour commencer
var z = 0; //initialise les z-index
var inAnimation = false; //flag pour tester si nous sommes en cours d'animation
$('#pictures img').each(function() { //attribue les z-index de départ
z++; //à la fin, le plus haut z-index sera dans cette variable
$(this).css('z-index', z); //attribue le z-index à la balise <img>
});
function swapFirstLast(isFirst) {
if(inAnimation) return false; //si une animation est en cours, on ne fait rien
else inAnimation = true; //modifie le flag pour dire que l'animation est en cours
var processZindex, direction, newZindex, inDeCrease; //prévoit le cas précédent ou suivant
if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //attribue les variables dans le cas 'suivant'
else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //attribue les variables dans le cas 'précédent'
$('#pictures img').each(function() { //actualise chaque image
if($(this).css('z-index') == processZindex) { //s'il s'agit de l'image à animer
$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //anime l'image au-dessus/en-dessous (les images doivent avoir la même hauteur)
$(this).css('z-index', newZindex) //attribue le nouveau z-index
.animate({ 'top' : '0' }, 'slow', function() { //ramène l'image à sa position initiale
inAnimation = false; //modifie le flag pour dire que l'animation est finie
});
});
} else { //ce n'est pas l'image à animer, on modifie juste le z-index
$(this).animate({ 'top' : '0' }, 'slow', function() { //il faut attendre la fin de l'animation pour modifier le z-index
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //ajuste le z-index
});
}
});
return false; //on ne suit pas le href du lien
}
$('#next a').click(function() {
return swapFirstLast(true); //met la première image en dernière position
});
$('#prev a').click(function() {
return swapFirstLast(false); //met la dernière image en première position
});
});
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Galerie d'art</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div class="grid_6 prefix_1 suffix_1" id="gallery">
<div id="pictures">
<img src="oeuvres_P0001/PE0001_1.jpg"/>
<img src="oeuvres_P0001/PE0001_2.jpg"/>
<img src="oeuvres_P0001/PE0001_3.jpg" />
<img src="oeuvres_P0001/PE0001_4.jpg" />
<img src="oeuvres_P0001/PE0001_5.jpg" />
<img src="oeuvres_P0001/PE0001_6.jpg" />
<img src="oeuvres_P0001/PE0001_7.jpg" />
<img src="oeuvres_P000/PE0001_8.jpg" />
<img src="oeuvres_P000/PE0001_9.jpg" />
</div>
<div class="grid_3 alpha" id="prev">
<a href="#previous">«Précédente</a>
</div>
<div class="grid_3 omega" id="next">
<a href="#next">Suivante »</a>
</div>
</div>
</body>
</html> |
[Galerie] Problème sur galerie tutoriel
Répondre avec citation
Envoyé par JCMANSION
.
Partager