Défilement des images javascript et php

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
mouls22
Messages : 4
Enregistré le : 05 déc. 2021, 18:37

Défilement des images javascript et php

Message par mouls22 » 05 déc. 2021, 18:50

Bonjour, après des recherches infructueuses je cherche à faire défiler mes images, et cela par annonce publiée. Le problème c'est qu'elles se défilent uniquement à partir de la première annonce, c'est à dire que l'image de la 1ère annonce va défiler les suivantes pour les annonces qui ne lui correspondent pas.Auriez-vous une solution, s'il vous plait?
Voici le code:
Javascript:

Code : Tout sélectionner

<script>
const items = document.querySelectorAll('img');
const nbSlide = items.length;
const suivant = document.querySelector('.right');
const precedent = document.querySelector('.left');
let count = 0;

function slideSuivante(){
    items[count].classList.remove('active');

    if(count < nbSlide - 1){
        count++;
    } else {
        count = 0;
    }

    items[count].classList.add('active')
    console.log(count);
    
}
suivant.addEventListener('click', slideSuivante)


function slidePrecedente(){
    items[count].classList.remove('active');

    if(count > 0){
        count--;
    } else {
        count = nbSlide - 1;
    }

    items[count].classList.add('active')
    // console.log(count);
    
}
precedent.addEventListener('click', slidePrecedente)

function keyPress(e){
    console.log(e);
    
    if(e.keyCode === 37){
        slidePrecedente();
    } else if(e.keyCode === 39){
        slideSuivante();
    }
}
document.addEventListener('keydown', keyPress)

 </script>
php:

Code : Tout sélectionner

    $images = !empty($res['images']) ? $res['images'] : NULL;
    if($images){
      //boucle sur les images
      echo'<div class="container">';
      echo ' <div class="slider" >';
      foreach( $images as $img ){
    
        echo '<img class ="active"
        style="width:90px; height:90px;"
         src="'.$img.'">';
          }
     echo "</div>";

     echo ' <div class="cont-btn" >';
     echo ' <div class="btn-nav left" > <'; echo "</div>";
     echo ' <div class="btn-nav right" > >';echo "</div>";
     echo "</div>";
     
    }
   
    echo "</div>";

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Défilement des images javascript et php

Message par webmaster » 06 déc. 2021, 10:55

Bonjour,

Je pense que le mélange des images vient de l'absence de référence de l'annonce associée
Il faudrait ajouter un id-annonce dans container par exemple
echo'<div class="container" id="annonce-".$annonceID.'">';
Et ensuite dans le selecteur JS, récupérer l'annonce en cours de visualisation pour chercher les images du container
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

mouls22
Messages : 4
Enregistré le : 05 déc. 2021, 18:37

Re: Défilement des images javascript et php

Message par mouls22 » 07 déc. 2021, 20:18

webmaster a écrit :
06 déc. 2021, 10:55
Bonjour,

Je pense que le mélange des images vient de l'absence de référence de l'annonce associée
Il faudrait ajouter un id-annonce dans container par exemple
echo'<div class="container" id="annonce-".$annonceID.'">';
Et ensuite dans le selecteur JS, récupérer l'annonce en cours de visualisation pour chercher les images du container
Bonjour webmaster, merci pour le retour, ça fait 1 mois que je cherche et là au moins j'ai une piste, mais je n'ai pas bien compris.
Dans echo'<div class="container" id="annonce-".$annonceID.'">', il y a bien une apostrophe en plus, et quand j'essaie d'équilibrer ça m'affiche une erreur au niveau de la variable en php: Notice: Array to string conversion in
Là j'ai fait:

Code : Tout sélectionner

const defilement= document.getElementById("annonce-".$anounceID.'");
Faut-il ajouter une fonction?

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Défilement des images javascript et php

Message par webmaster » 08 déc. 2021, 10:50

Attention, le $annonceID est une variable PHP qui n'est pas accessible sur le navigateur.
Il faut détecter en JS l'annonce active en cours

Une capture d'écran m'aiderait à mieux comprendre et à donner une piste plus précise.
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

mouls22
Messages : 4
Enregistré le : 05 déc. 2021, 18:37

Re: Défilement des images javascript et php

Message par mouls22 » 10 déc. 2021, 13:19

Bonjour webmaster, j'ai dû modifié pour vous montrer le résulat de ce que j'obtiens en capture d'écran:
https://imgur.com/a/sPRMN5V
Comme vous pouvez le voir dans les 2 photos, c'est en cliquant sur le bouton droite de la première annonce que le reste des images commence s'afficher dans la première annonce.
Mon nouveau code en php:

Code : Tout sélectionner

<?php foreach ($anouncement as $anounce) {
  echo '<div class="annoncepubs">';

  $images = !empty($anounce['images']) ? $anounce['images'] : ['/no_image.png']; // array

  if (!empty($images)) {
    //boucle sur les images
    echo'<div class="container">';
    echo ' <div class="slider" >';
    foreach ($images as $img) {
      echo '<img class ="active" style="width:90px; height:90px;" src="' . $img . '">';
    }
    echo "</div>"; // fin div slider . 
    echo '<div class="cont-btn" >';
    echo '  <div class="btn-nav left" > <';
    echo "  </div>";
    echo '  <div class="btn-nav right" > >';
    echo "  </div>";
    echo "</div>";
    echo "</div>"; // fin div container
  }
  echo "<span class='category'>" . $anounce['CATEGORIE'] . "</span>";
  echo "<span class='title'>" . $anounce['titre'] . "</span>";
  echo "<span class='comment'>" . $anounce['description'] . "</span>";
  echo "<span class='price'>" . $anounce['prix'] . "</span>";
  echo "<span class='date'>" . $anounce['created_date'] . "</span>";


  echo "</div>"; // fin div annoncepubs 
}
  
?>
Et mon JS:

Code : Tout sélectionner

<script>
const items = document.querySelectorAll('img');
const nbSlide = items.length;
const suivant = document.querySelector('.right');
const precedent = document.querySelector('.left');
let count = 0;

function slideSuivante(){
    items[count].classList.remove('active');

    if(count < nbSlide - 1){
        count++;
    } else {
        count = 0;
    }

    items[count].classList.add('active')
    console.log(count);
    
}
suivant.addEventListener('click', slideSuivante)


function slidePrecedente(){
    items[count].classList.remove('active');

    if(count > 0){
        count--;
    } else {
        count = nbSlide - 1;
    }

    items[count].classList.add('active')
    // console.log(count);
    
}
precedent.addEventListener('click', slidePrecedente)

function keyPress(e){
    console.log(e);
    
    if(e.keyCode === 37){
        slidePrecedente();
    } else if(e.keyCode === 39){
        slideSuivante();
    }
}
document.addEventListener('keydown', keyPress)

 </script>

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Défilement des images javascript et php

Message par webmaster » 12 déc. 2021, 15:37

Bonjour,

Je pense qu'il manque toujours l'identifiant de l'annonce concernée
Dans le PHP, j'ajouterai l'identifiant de l'annonce pour nommer le bloc contenant les annonces :

Code : Tout sélectionner

<?php foreach ($anouncement as $anounce) {
  echo '<div class="annoncepubs" id="annonce-"'.$anounce->id.'">';
Il faut retrouver l'identifiant de l'annonce pour que les boutons suivant/précédent ne jouent que sur les images concernés du bloc de l'annonce
L'ajout des événements par JS est trop globale
Pourquoi ne pas créer les évéments coté PHP avec un onclick en passant en paramètre l'identifiant de l'annonce

Code : Tout sélectionner

    echo '  <div class="btn-nav left" onclick="slideSuivante('.$anounce->id.'")> <';
Et coté JS :

Code : Tout sélectionner

function slideSuivante(annonceID){
  let items = document.getElementById("annonce-"+annonceID).querySelectorAll('img'); /* Ici on ne prend les images que du bloc */
    items[count].classList.remove('active');
C'est difficile de coder sans tester en réel, mais je pense que l'idée est ici
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

mouls22
Messages : 4
Enregistré le : 05 déc. 2021, 18:37

Re: Défilement des images javascript et php

Message par mouls22 » 03 janv. 2022, 02:19

Merci énormément. Votre code marche très bien !! Vous m'aviez sauvé. Excusez-moi pour ma réponse tardive, car je corrigeais des choses dans mon code qui prenaient du temps.
Très bonne année à vous !

Répondre