Partage
  • Partager sur Facebook
  • Partager sur Twitter

Du php dans du Jquery ?

Sujet résolu
    15 septembre 2019 à 15:11:58

    Bonsoir, j'ai un soucis, j'ai un slider qui contient des images appelées en php, mais le problème, c'est qu'il y a plusieurs slider dans la page (un par voiture) et seul le premier fonctionne. Ma question est, pouvez-vous m'aider à modifier mon code afin que les slider fonctionnent sur chaque div de voiture ? 

    aperçu :

    Voici le code html :

        <?php 
     include('include/connect_mysql.php');
     $reqA = $base->query('SELECT * FROM porsche');
    
     ?>
          <div class="titre">
            <h2>Modèles de la gamme</h2>
            <h1>Porsche</h1>
        </div>
        
        <?php while($donnee=$reqA->fetch()) { ?>
        <article class="voiture">
            <div class="first">
                <aside class="img">          <div id="overlay"></div>
    
                                             <div id="showContainer">
    
          <div class="imageContainer" id="im_1">
    
            <img  src=<?= $donnee['photo'];?> id="main">
          </div>
    
          <div class="imageContainer" id="im_2">
                            <img src=<?= $donnee['photo1'];?>>
          </div>
    
          <div class="imageContainer" id="im_3">
                            <img  src=<?= $donnee['photo2'];?>>
          </div>
          
          <div class="imageContainer" id="im_4">
                            <img  src=<?= $donnee['photo3'];?>>
          </div>
    
        </div>
                         </aside>
    
            </section>
        </article>
        <?php
     }
     ?>

    Et le code jquery concerné :

    <script type="text/javascript">
      $(document).ready(function() {
     
      $('#next').on('click', function(){
        // Change to the next image
        $('#im_' + currentImage).stop().fadeOut(1);
        increaseImage();
        $('#im_' + currentImage).stop().fadeIn(1);
      }); 
    
      var currentImage = 1;
      var totalImages = 4;
    
      function increaseImage() {
        /* Increase currentImage by 1.
        * Resets to 1 if larger than totalImages
        */
        ++currentImage;
        if(currentImage > totalImages) {
          currentImage = 1;
        }
      }
      function decreaseImage() {
        /* Decrease currentImage by 1.
        * Resets to totalImages if smaller than 1
        */
        --currentImage;
        if(currentImage < 1) {
          currentImage = totalImages;
        }
      }
    });
        </script>

    Je me doute que c'est un soucis de ciblage mais je vois pas comment appeler l'id des images généré par le php :(
    ps : Je poste ici parce que j'ai l'impression que comme c'est un soucis de php aussi personne ne va m'aider sur le forum JS :'(

    • Partager sur Facebook
    • Partager sur Twitter
      15 septembre 2019 à 19:47:10

      Bonjour,

      Sur chaque slider, il y a systématiquement 4 photos ? c'est un peu statique à mon goût ... 

      Le problème me semble t-il vient qu'il n'y a pas d'identifiant de slider mais uniquement des identifiants de photos (au nombre de 4 d'où ma question ci-dessus).

      Donc il faudrait ajouter un identifiant de slider dans le code php mais dynamique donc avec un indice par rapport au fetch : sans doute dans la ligne 17.

      A+

      • Partager sur Facebook
      • Partager sur Twitter
        15 septembre 2019 à 19:55:10

        Salut ! Oui il y a systématiquement 4 photos, et il peut y avoir plusieurs slider, la solution pourrait-être de rajouter le "donnee.id" donc ? J'avais essayé mais ça ne fonctionnait pas, ou je ne l'ai pas fait correctement, peut-on rajouter une balise php à l'intérieur du code jQuery ? Merci bien :)
        • Partager sur Facebook
        • Partager sur Twitter
          16 septembre 2019 à 0:08:16

          Hello, tu peux tout à fait écrire du javascript avec du php, il y a plusieurs façon de faire cela:

          1: Tu écrire ton script dans le fichier php, et là ça sera facile d'écrire sa balise php au millieu du javascript. (La plus simple, mais ton fichier php risque de vite grandir)

          2: Tu change l'extension de ton fichier javascript en .php, et dedans tu écrir ton javascript dans des balises <script></script> , pour le lier à ton fichier php qui contient ta page web, tu fait un include. (C'est moins simple, et un peu sale de devoir faire un include sur du javascript, mais tu grade le fait de séparer le php du javascript)

          3: Dans le fichier php, juste avant de rajouter ton fichier javascript dans le quel tu as ton slider, tu fait un tout petit script javascript, dans le quel tu rajoute tes variables php dans une variable javascript que tu stock dans l'object javascript windows, comme ça la variable javascript sera globale et atteignable dans ton fichier javascript là où tu as tes sliders. Je te donne un petit exemple, car c'est un peu chaud à expliquer à l'écrit. (Un peu moins simple aussi quand on ne connais pas, mais ça fonctionne très bien, perso c'est ma préféré car je trouve que c'est la plus propre)

          <!doctype html>
          <?php
          	/*
          		Ici tu fais ta requête sql
          	*/
          ?>
          <html>
          	<head>
          		<script>
          			/*
          				Et là tu fabrique du javascript grâce à du php
          			*/
          			windows.ma_variable_1 = '<?php echo('blablabla'); ?>'; // Pour envoyer une chaîne de caractères
          			windows.ma_variable_2 = <?php echo('2'); ?>; // Pour envoyer un chiffre
          			windows.ma_variable_3 = <?php echo('123456'); ?>; // Pour envoyer un nombre
          			/*
          				Les variables ma_variable_1, ma_variable_2, ma_variable_3 seront globale et
          				atteignable dans les fichier js suivants
          			*/
          		</script>
          		<script type="text/javascript" src="sliders.js"></script>
          	</head>
          	<body>
          		
          	</body>
          </html>



          -
          Edité par apoz4 16 septembre 2019 à 0:12:53

          • Partager sur Facebook
          • Partager sur Twitter
            16 septembre 2019 à 10:02:06

            Salut,

            dans les solutions faciles à mettre en place, tu peux utiliser le Carousel de Bootstrap:

            https://getbootstrap.com/docs/4.0/components/carousel/

            Il s'occupera de gérer tes différents "slider". Il faudra juste bien leur donner un id différent dans chaque fetch.

            • Partager sur Facebook
            • Partager sur Twitter
              16 septembre 2019 à 11:08:13

              apoz4 a écrit:

              Hello, tu peux tout à fait écrire du javascript avec du php, il y a plusieurs façon de faire cela:

              1: Tu écrire ton script dans le fichier php, et là ça sera facile d'écrire sa balise php au millieu du javascript. (La plus simple, mais ton fichier php risque de vite grandir)

              2: Tu change l'extension de ton fichier javascript en .php, et dedans tu écrir ton javascript dans des balises <script></script> , pour le lier à ton fichier php qui contient ta page web, tu fait un include. (C'est moins simple, et un peu sale de devoir faire un include sur du javascript, mais tu grade le fait de séparer le php du javascript)

              3: Dans le fichier php, juste avant de rajouter ton fichier javascript dans le quel tu as ton slider, tu fait un tout petit script javascript, dans le quel tu rajoute tes variables php dans une variable javascript que tu stock dans l'object javascript windows, comme ça la variable javascript sera globale et atteignable dans ton fichier javascript là où tu as tes sliders. Je te donne un petit exemple, car c'est un peu chaud à expliquer à l'écrit. (Un peu moins simple aussi quand on ne connais pas, mais ça fonctionne très bien, perso c'est ma préféré car je trouve que c'est la plus propre)

              <!doctype html>
              <?php
              	/*
              		Ici tu fais ta requête sql
              	*/
              ?>
              <html>
              	<head>
              		<script>
              			/*
              				Et là tu fabrique du javascript grâce à du php
              			*/
              			windows.ma_variable_1 = '<?php echo('blablabla'); ?>'; // Pour envoyer une chaîne de caractères
              			windows.ma_variable_2 = <?php echo('2'); ?>; // Pour envoyer un chiffre
              			windows.ma_variable_3 = <?php echo('123456'); ?>; // Pour envoyer un nombre
              			/*
              				Les variables ma_variable_1, ma_variable_2, ma_variable_3 seront globale et
              				atteignable dans les fichier js suivants
              			*/
              		</script>
              		<script type="text/javascript" src="sliders.js"></script>
              	</head>
              	<body>
              		
              	</body>
              </html>



              -
              Edité par apoz4 il y a environ 10 heures

              ................................................

              Salut, donc ça serait de définir la variable en php juste avant le Jquery ? : 

               <script> windows.ma_variable_1 = '<?php $donnee['id'] ; ?>'; </script>
              
                   <script type="text/javascript">
                $(document).ready(function() {
               
                $.ma_variable_1.on('click', function(){
                  // Change to the next image
                  $('#im_' + currentImage).stop().fadeOut(1);
                  increaseImage();
                  $('#im_' + currentImage).stop().fadeIn(1);
                }); 
                var currentImage = 1;
                var totalImages = 4;
              
                function increaseImage() {
              
                  ++currentImage;
                  if(currentImage > totalImages) {
                    currentImage = 1;
                  }
                }
                function decreaseImage() {
              
                  --currentImage;
                  if(currentImage < 1) {
                    currentImage = totalImages;
                  }
                }
              });
                  </script>


              Je suis pas sûr de moi là ^^et pour la solution de Bootstrap j'avais déjà essayé et j'aimais pas parce que je n'arrivais pas correctement à redimenssionner le carrousel et bien l'adapter.. Là tout est comme il faut on va dire mis à part le fait qu'il faut que je trouve le moyen de corriger mon code pour que ça fonctionne sur chaque slider :) 

              -
              Edité par EvilSpartans 16 septembre 2019 à 12:20:36

              • Partager sur Facebook
              • Partager sur Twitter
                17 septembre 2019 à 11:52:08

                Dans ton nouvel exemple, tu as un peu mélangé les façons de faire, tu as oublié d'utiliser la fonction écho dans la balise php, et dans le code javascript je crois que $.ma_variable_1 ça ne fonctionne pas. De plus comme je ne sais pas si tu as deux fichier (un pour le php et un autre pour le javascript), je te redonne deux exemples:

                Si tu as deux fichiers, un pour le php et un deuxième pour le javascript:

                Ton fichier php:

                <script> windows.ma_variable_1 = '<?php echo($donnee['id']); ?>'; </script>

                Ton fichier javascript:

                  $(document).ready(function() {
                  
                  $(ma_variable_1).on('click', function(){
                    // Change to the next image
                    $('#im_' + currentImage).stop().fadeOut(1);
                    increaseImage();
                    $('#im_' + currentImage).stop().fadeIn(1);
                  });
                  var currentImage = 1;
                  var totalImages = 4;
                 
                  function increaseImage() {
                 
                    ++currentImage;
                    if(currentImage > totalImages) {
                      currentImage = 1;
                    }
                  }
                  function decreaseImage() {
                 
                    --currentImage;
                    if(currentImage < 1) {
                      currentImage = totalImages;
                    }
                  }
                });



                Si tu as un seul fichier php, qui contient ton php et ton javascript:

                Ton fichier php:

                     <script type="text/javascript">
                  $(document).ready(function() {
                  
                  $('<?php echo($donnee['id']); ?>').on('click', function(){
                    // Change to the next image
                    $('#im_' + currentImage).stop().fadeOut(1);
                    increaseImage();
                    $('#im_' + currentImage).stop().fadeIn(1);
                  });
                  var currentImage = 1;
                  var totalImages = 4;
                 
                  function increaseImage() {
                 
                    ++currentImage;
                    if(currentImage > totalImages) {
                      currentImage = 1;
                    }
                  }
                  function decreaseImage() {
                 
                    --currentImage;
                    if(currentImage < 1) {
                      currentImage = totalImages;
                    }
                  }
                });
                    </script>

                -
                Edité par apoz4 17 septembre 2019 à 11:54:43

                • Partager sur Facebook
                • Partager sur Twitter
                  17 septembre 2019 à 13:11:07

                  Mais je dois attribuer cette id au button "next" ? Parce que sinon je ne vois pas comment la liaison est faite^^

                  Si je défini l'id du bouton next sur le <?= $donnee['id'];?> ça ne fonctionne pas non plus avec ton code..

                  -
                  Edité par EvilSpartans 17 septembre 2019 à 13:13:21

                  • Partager sur Facebook
                  • Partager sur Twitter
                    17 septembre 2019 à 13:18:45

                    Bonjour,

                    Tu dois juste avoir une chose simple à l'esprit : ton code Php est traité côté serveur, et comme résultat tu as une page "html/js".

                    Cette page est envoyée au navigateur qui va l'interpréter.

                    • Partager sur Facebook
                    • Partager sur Twitter
                      17 septembre 2019 à 14:07:58

                      C'était juste pour te montrer que du coup ce n'est pas vraiment un pb php.
                      • Partager sur Facebook
                      • Partager sur Twitter
                        17 septembre 2019 à 14:30:10

                        Oui mais si j’avais pas de php je saurai le faire, là je suis bloqué parce que je ne vois pas comment faire en sorte que peu importe le nombre de slider chargé d’images php il y aura, que les slider fonctionneront quand même

                        edit : Bon en mettant le "im_" en classe et non en id j'arrive à faire fonctionner tous les slider, ce qui est bête c'est qu'ils tournent tous en même temps (je sais que c'est logique avec la même classe) mais je n'arrive pas à intégrer le php ...

                        -
                        Edité par EvilSpartans 17 septembre 2019 à 15:49:21

                        • Partager sur Facebook
                        • Partager sur Twitter
                          17 septembre 2019 à 16:23:15

                          Mais tes images ne sont pas "php" : si tu es capable de les afficher, tu dois pouvoir leur donner un id propre et modifier ton javascript en conséquence.
                          • Partager sur Facebook
                          • Partager sur Twitter
                            17 septembre 2019 à 17:28:51

                            J'ai réussi avec un ami, la solution était de parcourir le DOM :)
                            • Partager sur Facebook
                            • Partager sur Twitter

                            Du php dans du Jquery ?

                            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                            • Editeur
                            • Markdown