Défiler des images PHP CSS

Résolu/Fermé
max30 - 12 nov. 2021 à 18:10
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022 - 14 nov. 2021 à 22:40
Bonjour,
Je souhaite faire défiler les images d'une annonce se trouvant en mysql, à partir du CSS. Le nombre d'images différe d'une annonce à l'autre, i.e des annonce qui contiennent une seule, d'autre plusieurs...
Auriez-vous une solution?
Voici mon code:
<p>Toutes les annonces</p> <br>
<div class="">
<?php $prev_anounce = NULL ?>

<?php foreach($anouncement as $anounce): ?>
  <?php if ($anounce->id != $prev_anounce): ?>
    <?php if (!is_null($prev_anounce)): ?>
      </div>
    <?php endif ?>
  <?php endif ?>


  <div class="annoncepub">
    <input type="radio" name="slides" id="i1" checked>
    <input type="radio" name="slides" id="i2" checked>
    <input type="radio" name="slides" id="i3" checked>
    <input type="radio" name="slides" id="i4" checked>
    <input type="radio" name="slides" id="i5" checked>
  <div class="slide" id="allimages">
    <img src="<?= htmlspecialchars($anounce->filename_product) ?>">

    
    <label for="i1" class="pre"><</label>
    <label for="i2" class="nxt">></label>
    </div>


    <div class="navs">
      <label class="dots" id="dot1" for="i1"></label>
      <label class="dots" id="dot2" for="i2"></label>
    </div>


  <?php if ($anounce->id != $prev_anounce): ?>
      <?= htmlspecialchars($anounce->titre) ?><br>
      <?= htmlspecialchars($anounce->presentation) ?><br>
      <?= htmlspecialchars($anounce->prix) ?><br>
      <?= htmlspecialchars($anounce->ville) ?><br>
  <?php endif ?>
</div>


  <?php $prev_anounce = $anounce->id ?>
<?php endforeach ?>
<?php if ($anouncement): ?>
<?php endif ?>


</div>




Et ici le CSS:

.annoncepub{
  width:600px;
  height: 200px;
  border-bottom: solid orange;
  text-align: center;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slide{

  width: 10%;
  height: 40%;
  }

  .slide img{
  margin-left: 5px;
  width: 140px;
    height: 130px;
    }
  .pre, .nxt{
    width: 12%;
    height: 100%;
    top: 0;
    background: blue;
    z-index: 99;
    cursor: pointer;

  }

  .pre {
 left: 20;
}

.next{
  right:20;
}

.navs{
  width: 100%;
  height: 11px;
  bottom: 12%;
  position: absolute;
  text-align:center;
  z-index: 99;
}

.dots{
  top:20px;
  width:20px ;
  height: 20px;
  margin: 0 4px;

  border-radius: 20px;
  display:inline-block;
  background: black;
}

.slide{
  z-index: -1;
}

#i1:checked ~ #allimages{
z-index: 9;
}
A voir également:

15 réponses

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
13 nov. 2021 à 01:05
Bonjour,

Vu que maintenant tu stockes les images de tes produits dans la table image_products, il ne te reste plus qu'à faire une requête SQL sur cette table et à boucler dessus pour générer tes slides.
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
13 nov. 2021 à 15:04
Bonjour Jordane, je l'ai fait avec une une fonction afficherAnnonce en joignant les deux tables images_products et annonces:

function afficherAnnonce(){
    global $bdd;
   
    $sql = $bdd->prepare('SELECT * FROM annonces
    INNER JOIN image_products
    ON annonces.id= image_products.id_product'
    );
    $sql ->execute();
    $data= $sql->fetchAll(PDO::FETCH_OBJ);
       return $data;
    
}


Ce qui ne va pas, c'est que pour une annonce par exemple qui a 3 images, les champs description, titre... vont apparaitre seulement pour la première photo, tandis que les autres s'affichent sans les champs correspondant (Voir la photo en dessous). C'est au niveau de la boucle, je pense. Et le défilement, je ne sais pas s'il faut le faire avec du JS.

0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
13 nov. 2021 à 17:35
Tu peux faire un var_dump de $data pour nous montrer ce que tu obtiens ?
A la suite de ça, il faudrait recréer un arry mieux "arrangé" afin de pouvoir boucler dessus plus facilement..
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
13 nov. 2021 à 18:14
Voila en photos ce que j'obtiens:





Veux-tu dire qu'il faut par exemple faire: $images= [$img1,$img2,$img3,$img4,$img5]?
Si oui, où les mettre dans le code? à côté de la fonction afficherAnnonce?
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
Modifié le 13 nov. 2021 à 22:00
J'aurais préféré que tu me le donne en version text ... une image.. on ne peut pas copier/coller si on a besoin..

Quoi qu'il en soit, essaye un truc du genre

function afficherAnnonce(){
  global $bdd;
  $res = [];
  $sql = 'SELECT * FROM annonces
    INNER JOIN image_products
    ON annonces.id= image_products.id_product';
    
    
  try{
    $req = $bdd->prepare($sql);
    $req ->execute();
    $data = $req ->fetchAll(PDO::FETCH_OBJ);
    //on reconstruit un array mieux organisé pour avoir les photos
    
    foreach($data as $R){
      if(!isset($res[$R->id])){
       $res[$R->id] = $R;
       unset($res[$R->id]['filenameproduct']);
      }
       $res[$R->id]['images'][] = $R->filenameproduct; 
    }
    
  }catch(Exception $e){
      echo "Erreur dans la requête " . $sql;
  }
  var_dump( $res) ; // le temps des tests pour voir le résultat
  return $res;
    
}


correction $sql ---> $req

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
13 nov. 2021 à 19:09
C'est l'erreur qui s'affiche:

Fatal error: Uncaught Error: Call to a member function fetchAll() on string in C:\wamp64\www\Projetsite\cmdaffichage.php on line 13

Il s'agit de la ligne suivante: $data = $sql->fetchAll(PDO::FETCH_OBJ);
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
13 nov. 2021 à 22:00
et bien.. c'est facile à corriger ...
tu as vraiment besoin de moi pour ça ????

Il te suffit de remplacer cette ligne par
    $data = $req ->fetchAll(PDO::FETCH_OBJ);
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
13 nov. 2021 à 23:51
Une autre erreur s'affiche pour cette ligne: unset($res[$R->id]['filename_product']);

: Fatal error: Uncaught Error: Cannot use object of type stdClass as array in C:\wamp64\www\Projetsite\cmdaffichage.php on line 19

Et pour essayer d'y remédier j'ai remplacé FETCH_OBJ par FETCH_ASSOC, et une suite d'autres erreurs s'affichent partout: Trying to get property of non-object in C:\wamp64\www\Projetsite\cmdaffichage.php on line 17.
Il s'agit donc d'ici : if(!isset($res[$R->id])){
et ici $res[$R->id]['images'][] = $R->filename_product;

Elle correspond à quoi [images]? Je n'ai pas de champs qui s'appelle images en bdd.


J'ai donc ramené le code à ce qu'il était avec fetch_obj, histoire de ne pas bidouiller
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
14 nov. 2021 à 01:35
En FETCH_ASSOC

function afficherAnnonce(){
  global $bdd;
  $res = [];
  $sql = 'SELECT * FROM annonces
    INNER JOIN image_products
    ON annonces.id= image_products.id_product';
    
    
  try{
    $req = $bdd->prepare($sql);
    $req->execute();
    $data = $req->fetchAll(PDO::FETCH_ASSOC);
    //on reconstruit un array mieux organisé pour avoir les photos
    
    foreach($data as $R){
      if(!isset($res[$R['id']])){
       $res[$R['id']] = $R;
       unset($res[$R['id']]['filenameproduct']);
      }
       $res[$R['id']]['images'][] = $R['filenameproduct']; 
    }
    
  }catch(Exception $e){
      echo "Erreur dans la requête " . $sql;
  }
  var_dump( $res) ; // le temps des tests pour voir le résultat
  return $res;
    
}
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
14 nov. 2021 à 13:51
Ce qui apparait en var dump:
71 =>
array (size=11)
'id' => string '71' (length=2)
'nompseudo' => string 'Supermario' (length=10)
'categorie' => string 'telephone' (length=9)
'ville' => string 'nouakchott' (length=10)
'titre' => string 'Vente de téléphone' (length=20)
'presentation' => string 'Si vous voulezun téléphone à vendre de type lopl' (length=51)
'prix' => string '800' (length=3)
'telephone' => string '36357412' (length=8)
'email' => string 'mario@gmail.com' (length=15)
'id_product' => string '71' (length=2)
'images' =>
array (size=1)
0 => string 'pictures/telephone.jpg' (length=22)
72 =>
array (size=11)
'id' => string '72' (length=2)
'nompseudo' => string 'Leo25' (length=5)
'categorie' => string 'bureaus' (length=7)
'ville' => string 'nouakchott' (length=10)
'titre' => string 'Location de bureau' (length=18)
'presentation' => string 'Des bureaux en excellentes qualités à louer' (length=45)
'prix' => string '1200' (length=4)
'telephone' => string '4589632' (length=7)
'email' => string 'infor@loio.com' (length=14)
'id_product' => string '72' (length=2)
'images' =>
array (size=5)
0 => string 'pictures/bureau1.jpg' (length=20)
1 => string 'pictures/bureau2.jpg' (length=20)
2 => string 'pictures/bureau3.jpg' (length=20)
3 => string 'pictures/bureau4.jpg' (length=20)
4 => string 'pictures/bureau5.jpg' (length=20)



Après, les images ne s'affichent pas. Est-ce à cause du format?




Message d'erreur: Notice: Trying to get property of non-object in C:\wamp64\www\Projetsite\accueil.php on line 137
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
Modifié le 14 nov. 2021 à 14:51
A noter qu'on est passer en FETCH_ASSOC et plus en OBJECT ...

Maintenant que l'array contient ta liste d'articles + les images

Comme tu peux le voir, les photos sont contenues dans un sous-array de tes annonces ... dans images
'images' =>
array (size=5)
0 => string 'pictures/bureau1.jpg' (length=20)
1 => string 'pictures/bureau2.jpg' (length=20)
2 => string 'pictures/bureau3.jpg' (length=20)
3 => string 'pictures/bureau4.jpg' (length=20)
4 => string 'pictures/bureau5.jpg' (length=20)

il te sera plus façile de boucler dessus non ??

(et donc plus besoin de tes tests sur $prev_anounce...)


un truc du style :

<?php 
foreach($anouncement as $anounce) {
   // les infos de l'annonce
  // ...
  // ....
  //....

    $images = !empty($announce['images']) ? $announce['images'] : NULL;
    if($images){
      //boucle sur les images
     echo ' <div class="slide" id="allimages">';
      foreach( $images as $img ){

        echo '<img src="'.$img.'">';

    
       echo '<label for="i1" class="pre"><</label>
               <label for="i2" class="nxt">></label>';
    
      }
     echo "</div>";
    }
  }


0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
14 nov. 2021 à 15:25
Presque... Le meme message d'erreur (trying to get message property of non object) pour les lignes 150, 151 152):
Voici mon code
<p>Toutes les annonces</p> <br>
<div class="">

<?php foreach($anouncement as $anounce): ?>
  


  <div class="annoncepub">
    <input type="radio" name="slides" id="i1" checked>
    <input type="radio" name="slides" id="i2" checked>
    <input type="radio" name="slides" id="i3" checked>
    <input type="radio" name="slides" id="i4" checked>
    <input type="radio" name="slides" id="i5" checked>


    <?php $images = !empty($announce['images']) ? $announce['images'] : NULL;
    if($images){
      //boucle sur les images
     echo ' <div class="slide" id="allimages">';
      foreach( $images as $img ){

        echo '<img src="'.$img.'">';

    
       echo '<label for="i1" class="pre"><</label>
               <label for="i2" class="nxt">></label>';
    
      }
     echo "</div>";
    }

?>

      <?= htmlspecialchars($anounce->titre) ?><br>
      <?= htmlspecialchars($anounce->presentation) ?><br>
      <?= htmlspecialchars($anounce->prix) ?><br>
      <?= htmlspecialchars($anounce->ville) ?><br>
</div>

<?php endforeach ?>


Il s'agit ainsi de ces lignes:
   <?= htmlspecialchars($anounce->presentation) ?><br>
      <?= htmlspecialchars($anounce->prix) ?><br>
      <?= htmlspecialchars($anounce->ville) ?><br>


Est-ce que le problème est avec 'images' dans le code, car je n'ai pas un champ en bdd ni une variable qui s'appellent ainsi.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
14 nov. 2021 à 15:54
Je t'ai dit .. on est passé en FETCH_ASSOC .. on n'est plus en FETCH_OBJECT .... tu l'as lu ça ??
Tu as essayé de voir la différence entre les deux ???
Tu as regardé comment j'accédais aux valeurs de ton array ?

Tu connais la différence entre un OBJET et un ARRAY bien sûr ....? ( ça fait parti des choses minimum à apprendre sur les langages de programmation... )

Je vais quand même te donner la réponse, sinon j'ai peur qu'on n'y passe notre dimanche..
Donc
$anounce->titre

A changer par
$anounce['titre']

idem pour les autres...
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
14 nov. 2021 à 16:44
J'ai bien compris la différence entre les deux, et donc j'ai apporté une modification au code comme tu as dit. Mais une autre erreur s'affiche pour 'images':

Parse error: syntax error, unexpected ''$images = !empty($announce['' (T_CONSTANT_ENCAPSED_STRING), expecting ',' or ';' in C:\wamp64\www\Projetsite\accueil.php on line 131

On est tout prêt de la touche finale.

Voici le code:

<p>Toutes les annonces</p> <br>
<div class="">

<?php foreach($anouncement as $anounce){
  

echo'
  <div class="">
    <input type="radio" name="slides" id="i1" checked>
    <input type="radio" name="slides" id="i2" checked>
    <input type="radio" name="slides" id="i3" checked>
    <input type="radio" name="slides" id="i4" checked>
    <input type="radio" name="slides" id="i5" checked>'


    $images = !empty($announce['images']) ? $announce['images'] : NULL;
    if($images){
      //boucle sur les images
     echo ' <div class="slide" id="allimages">';
      foreach( $images as $img ){

        echo '<img src="'.$img.'">';

    
       echo '<label for="i1" class="pre"><</label>
               <label for="i2" class="nxt">></label>';
    
      }
     echo "</div>";
    }


       $anounce['titre']
        $anounce['presentation']
       $anounce['prix']
     $anounce['ville'] 

  }

?>



</div>

</body>
</html>
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
14 nov. 2021 à 16:48
Il manque un point-virgule ,à la fin de ton écho à la ligne 13
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
14 nov. 2021 à 17:12
Le probleme est avec anounce dans la ligne 33
Parse error: syntax error, unexpected '$anounce' (T_VARIABLE) in C:\wamp64\www\Projetsite\accueil.php on line 149


Et en les séparant par des points virgules (
$anounce['titre'];
$anounce['presentation'];
$anounce['prix'];
$anounce['ville'];)


plus d'erreur ne s'affiche, mais une page vide seulement.

0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
14 nov. 2021 à 18:02
Je t'ai parlé de la ligne 13 du code que tu nous as montré dans ton précédent message
echo'
  <div class="">
    <input type="radio" name="slides" id="i1" checked>
    <input type="radio" name="slides" id="i2" checked>
    <input type="radio" name="slides" id="i3" checked>
    <input type="radio" name="slides" id="i4" checked>
    <input type="radio" name="slides" id="i5" checked>'


    $images = !empty($announce['images']) ? $announce['images'] : NULL;


Il manque un POINT-VIRGULE à la fin de l'instruction ECHO ....
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
14 nov. 2021 à 18:20
Je l'ai fait comme tu l'as montré, mais après il y a les erreurs de mon message précédant:
Voici le code:
<p>Toutes les annonces</p> <br>
<div class="">

<?php foreach($anouncement as $anounce){
  

echo'
  <div class="">
    <input type="radio" name="slides" id="i1" checked>
    <input type="radio" name="slides" id="i2" checked>
    <input type="radio" name="slides" id="i3" checked>
    <input type="radio" name="slides" id="i4" checked>
    <input type="radio" name="slides" id="i5" checked>';


    $images = !empty($announce['images']) ? $announce['images'] : NULL;
    if($images){
      //boucle sur les images
     echo ' <div class="slide" id="allimages">';
      foreach( $images as $img ){

        echo '<img src="'.$img.'">';

    
       echo '<label for="i1" class="pre"><</label>
               <label for="i2" class="nxt">></label>';
    
      }
     echo "</div>";
    }


       $anounce['titre']
        $anounce['presentation']
       $anounce['prix']
     $anounce['ville']

  }

?>



</div>

</body>
</html>


Ce qui nous donne:

Parse error: syntax error, unexpected '$anounce' (T_VARIABLE) in C:\wamp64\www\Projetsite\accueil.php on line 149


Et si on ajoute des points virgules ( $anounce['titre'];
$anounce['presentation'];
$anounce['prix'];
$anounce['ville'];))

l'erreur disparait mais rien ne s'affiche. tu peux voir dans la photo de mon message précédant ce qui apparait
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
14 nov. 2021 à 19:25

Et si on ajoute des points virgules ( $anounce['titre'];
$anounce['presentation'];
$anounce['prix'];
$anounce['ville'];))

l'erreur disparait mais rien ne s'affiche

Donc, oui, il faut bien mettre les points virgules ...
Mais.. tes variables tu en fais quoi au juste ...??
Rien ne s'affiche... par ce que tu n'as pas demandé au programme de les afficher ...
Un petit echo pour chaque variable pourrait être utile non ..??
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
14 nov. 2021 à 20:12
J'ai echo les champs comme tu as dit. Aucune erreur ne s'affiche, mais les images sont absentes .

0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
14 nov. 2021 à 20:26
et tu as vérifié dans le code source généré de ta page, si le chemin vers les images était le bon ?
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
14 nov. 2021 à 20:41
On avait verifié avec le var dump.
Mais est-ce que ce n'est pas au niveau de ces deux codes?

1-
$res[$R['id']]['images'][] = $R['filename_product']; 

2-
 $images = !empty($announce['images']) ? $announce['images'] : NULL;
    if($images){


Dans ma table, je n'ai pas de champs qui s'appelle images, sinon filename_product.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
14 nov. 2021 à 20:55
De quoi tu parles ???
Si dans le var_dump c'est conforme à ce qu'on attend .. c'est que ces lignes sont bonnes....

As tu, comme je te l'ai demandé, vérifié le code source généré de ta page ???

Pour rappel, une fois ta page affichée dans ton navigateur internet, tu peux utiliser le raccourci clavier Ctrl + U



Et à la limite, ajoutes, dans ta boucle, un
 var_dump($anounce);

pour voir ce que ça contient..
Puis, la même chose sur $images
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
Modifié le 14 nov. 2021 à 21:26
Voila, on ne pas l'image dans le code source.
Et dans le var duump une seule image seulement






Pour var dum img, on obtient Undefined variable: img
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
14 nov. 2021 à 22:03
une seule image car pour l'annonce dont l'id est 75 tu ne dois en avoir qu'une ...

Par contre, en relisant le code, j'ai vu une erreur.. ( que tu aurais pu voir aussi si tu prenais le temps de relire le code qu'on te donne au lieu de juste le copier/coller bêtement... )
Et donc
 $images = !empty($announce['images']) ? $announce['images'] : NULL;

$announce ... j'ai mis un "n" en trop..
donc à corriger ici
$images = !empty($announce['images']) ? $announce['images'] : NULL;

$images = !empty($anounce['images']) ? $anounce['images'] : NULL;
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
14 nov. 2021 à 22:40
Parfait!!! SuperJordane ????‍♂️????‍♂️!! ça marche!! Je te remercie pour tout le temps que tu m'as accordé. En même temps, grâce à toi j'ai approfondi des trucs de bases.

Bien à toi :)
0