+ Répondre à la discussion
Affichage des résultats 1 à 11 sur 11
  1. #1
    Membre régulier
    Inscrit en
    novembre 2007
    Messages
    367
    Détails du profil
    Informations forums :
    Inscription : novembre 2007
    Messages : 367
    Points : 71
    Points
    71

    Par défaut Problème sur galerie tuto

    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
    PAPI

  2. #2
    Membre éprouvé Avatar de Nheo_
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2011
    Messages
    317
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2011
    Messages : 317
    Points : 404
    Points
    404

    Par défaut

    Bonjour,

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

  3. #3
    Membre régulier
    Inscrit en
    novembre 2007
    Messages
    367
    Détails du profil
    Informations forums :
    Inscription : novembre 2007
    Messages : 367
    Points : 71
    Points
    71

    Par défaut

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

  4. #4
    Membre éprouvé Avatar de Nheo_
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2011
    Messages
    317
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2011
    Messages : 317
    Points : 404
    Points
    404

    Par défaut

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

  5. #5
    Membre régulier
    Inscrit en
    novembre 2007
    Messages
    367
    Détails du profil
    Informations forums :
    Inscription : novembre 2007
    Messages : 367
    Points : 71
    Points
    71

    Par défaut

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

  6. #6
    Membre éprouvé Avatar de Nheo_
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2011
    Messages
    317
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2011
    Messages : 317
    Points : 404
    Points
    404

    Par défaut

    Citation Envoyé par JCMANSION Voir le message
    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.

  7. #7
    Membre chevronné

    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2011
    Messages
    409
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Finance

    Informations forums :
    Inscription : mars 2011
    Messages : 409
    Points : 773
    Points
    773

    Par défaut

    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 ?
    Membre de StackOverflow, je suis un fervant utilisateur de PHP et de jQuery.
    Après des études de graphisme, j'ai décidé de mélanger développement web et web design. J'ai ainsi donc créé mon site web mais aussi plusieurs projets personnels.
    Dans les plus aboutis, vous pourrez trouver dans mon labo et dans mon devblog, un raccourcisseur d'url, un bookmarklet pour envoyer l'url de la page actuelle vers votre email pour lire plus tard ou sauvegarder, mon générateur de template HTML5, etc...

  8. #8
    Membre éprouvé Avatar de Nheo_
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2011
    Messages
    317
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2011
    Messages : 317
    Points : 404
    Points
    404

    Par défaut

    Citation Envoyé par Shikiryu Voir le message
    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 ...

    Citation Envoyé par Shikiryu Voir le message
    Par contre, c'est quoi le rapport avec PHP ?
    Aucun en effet, si un modérateur pouvait déplacer le sujet .

  9. #9
    Membre régulier
    Inscrit en
    novembre 2007
    Messages
    367
    Détails du profil
    Informations forums :
    Inscription : novembre 2007
    Messages : 367
    Points : 71
    Points
    71

    Par défaut

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

  10. #10
    Membre éprouvé Avatar de Nheo_
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2011
    Messages
    317
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2011
    Messages : 317
    Points : 404
    Points
    404

    Par défaut

    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.

  11. #11
    Membre régulier
    Inscrit en
    novembre 2007
    Messages
    367
    Détails du profil
    Informations forums :
    Inscription : novembre 2007
    Messages : 367
    Points : 71
    Points
    71

    Par défaut

    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
    PAPI

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •