Problème sur galerie tuto

[JCMANSION]

Bonjour

Je veux faire la galerie de ce tuto :
http://dmouronval.developpez.com/tut...dex-et-jquery/

Je suis pas tres doué en PHP (car je debute dans ce langage) et j'ai des erreurs dans mon 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
<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>

Sur la ligne "<script type="text/javascript">" j'ai ce message

Code :

Invalid location of tag (script).

Pouvez-vous me dire pourquoi
Merci pour vos reponses

[Nheo_]

Bonjour,

Peux tu nous dire ou tu as inséré ce code dans ta page ?

[JCMANSION]

Oui voici le code complet de ma page

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
<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>

[Nheo_]

Ton code JavaScript doit être inséré entre les balises <head> </head> de ta page HTML.

[JCMANSION]

Merci pour ta réponse
Quand je teste sur le navigateur, j'ai une page blanche

[Nheo_]

Envoyé par JCMANSION

Merci pour ta réponse
Quand je teste sur le naviguateur, j'ai une page blanche

Regarde si les liens vers les fichiers .js sont corrects, etc.

Sinon, si ton code n'a rien de confidentiel, tu peux joindre le projet complet, j'y jetterai un coup d’œil.

[Shikiryu]

Pour le peu que je sache, il fonctionnerait aussi dans la balise <body>
Le tout, c'est qu'il ne soit pas en dehors du HTML...

Par contre, c'est quoi le rapport avec PHP ?

[Nheo_]

Envoyé par Shikiryu

Pour le peu que je sache, il fonctionnerait aussi dans la balise <body>
Le tout, c'est qu'il ne soit pas en dehors du HTML...

Oui aussi ...

Envoyé par Shikiryu

Par contre, c'est quoi le rapport avec PHP ?

Aucun en effet, si un modérateur pouvait déplacer le sujet .

[JCMANSION]

Pour l'instant j'ai que cette page

Mes liens sont :

Code :

1
2
3
<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>

jquery.mobile-1.0a4.1.min.css est sur le projet (dons le chemin est bon...)

comme dit sur le tuto, j'ai ajouté dans jquery.mobile-1.0a4.1.min.css :

Code :

1
2
3
4
5
6
/* début de la partie concernant la galerie */
#gallery { position: relative; }
#pictures { position: relative; height: 408px; }
#pictures img { position: absolute; top: 0; left: 0; }
#prev, #next { margin-top: 30px; text-align: center; font-size: 2.0em; }
/* fin de la partie concernant la galerie */

A cet endroit :

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
/*!
 * jQuery Mobile v1.0a4.1
 * http://jquerymobile.com/
 *
 * Copyright 2010, jQuery Project
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 */
/*!
 * jQuery Mobile v1.0a4.1
 * http://jquerymobile.com/
 *
 * Copyright 2010, jQuery Project
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 
 /* début de la partie concernant la galerie */
#gallery { position: relative; }
#pictures { position: relative; height: 408px; }
#pictures img { position: absolute; top: 0; left: 0; }
#prev, #next { margin-top: 30px; text-align: center; font-size: 2.0em; }
/* fin de la partie concernant la galerie */
 
 */.ui-bar-a{border:1px solid #2a2a2a;background:#111;color:.....etc

C'est pas cela ?

[Nheo_]

Code :

*/.ui-bar-a{border:1px solid

Enlève ce qui est en rouge.

Le soucis, c'est qu'avoir une page blanche comme résultat peut être dû à tout et n'importe quoi .

Si tu peux mettre le projet complet, ça pourrait aider.

[JCMANSION]

Ok ma page s'affiche mais :

j'ai la première image grande
et par dessus au coin supérieur gauche une image petite non affichée
quand je clic sur les boutons l'image petite bouge, mais c'est tout

hors d'aprés le tuto le clic sur un bouton change l'image