Bonjour,

Je sais que mon titre n'est pas très explicite mais je vais tenter d'être plus clair ici

Donc voilà, j'aimerais pouvoir afficher des images que j'importe de ma BDD en fonction de son type (si c'est de l'illustrator, photoshop, ...).

Pour cela j'ai créé 3 tables dans ma BDD qui sont "works"[id, name, desc, link], "work_type"[id, id_works, id_type] et "type"[id, type].

Voici mon slider de base sans passer par PHP et MySQL:

<div id="mi-slider" class="mi-slider">
                        <ul>
                            <li><a href="#"><img src="img/1.svg" alt="img01"><h4>Bender</h4></a></li>
                            <li><a href="#"><img src="img/2.svg" alt="img02"><h4>Logo Moving Planet</h4></a></li>
                        </ul>
                        <ul>
                            <li><a href="#"><img src="img/5.jpg" alt="img05"><h4>Pub Camel</h4></a></li>
                            <li><a href="#"><img src="img/6.jpg" alt="img06"><h4>Montage vintage</h4></a></li>
                        </ul>
                        <ul>
                            <li><a href="#"><img src="img/9.svg" alt="img09"><h4>Casual</h4></a></li>
                            <li><a href="#"><img src="img/10.svg" alt="img10"><h4>Luxury</h4></a></li>
                            <li><a href="#"><img src="img/11.svg" alt="img11"><h4>Sport</h4></a></li>
                        </ul>
                        <ul>
                            <li><a href="#"><img src="img/12.svg" alt="img12"><h4>Carry-Ons</h4></a></li>
                            <li><a href="#"><img src="img/13.svg" alt="img13"><h4>Duffel Bags</h4></a></li>
                        </ul>
    <nav>
       <a href="#">Illustrator</a>
       <a href="#">Photoshop</a>
       <a href="#">Compositing</a>
       <a href="#">WEB Design</a>
    </nav>

Pour l'adapter à ce que j'ai besoins il me faudrait récupérer dans ma BDD le type (Illustrator, ...) afin que par la suite avec une boucle il m'affiche le contenu de ma BDD en fonction du type

Un peu comme ceci mais avec des echo pour qu'il me les intègres dans des <ul> et <li> afin que ma css puisse agir dessus:

<?php 
			$req= $bdd->prepare("SELECT * FROM works WHERE id= ?");
			while($don = $req->fetch())
			{	
					echo "<a href='#'><img src='img/works/".$don['link']."'/>";
					$req_type= $bdd->prepare("SELECT works.id AS w_id, works.name AS w_name, works.link AS w_link FROM works INNER JOIN work_type ON works.id=works_type.id_works WHERE work_type.id_type= ?");
					$req_type->execute(array($don['id']));
					while($don_type = $req_type->fetch()){
						echo "<div class='type'>Type: <a href='type.php?id=".$don_type['w_id']."'>".$don_type['w_name']." </a></div>";
					}
					$req_type->closeCursor();
				echo "</div>";	
			}
			$req->closeCursor();
?>

Je suis presque certain que je ne me suis pas fait comprendre mais bon je tente quand même, n'hésitez pas à me poser des question sur ce que j'aurais peu-être oublié de préciser!

Merci beaucoup d'avance

Bonjour,

Malheureusement, j'ai peur de ne pas comprendre. Le code suivant fonctionne ? :

<?php 
      $req= $bdd->prepare("SELECT * FROM works WHERE id= ?");
      while($don = $req->fetch())
      {	
          echo "<a href='#'><img src='img/works/".$don['link']."'/>";
          $req_type= $bdd->prepare("SELECT works.id AS w_id, works.name AS w_name, works.link AS w_link FROM works INNER JOIN work_type ON works.id=works_type.id_works WHERE work_type.id_type= ?");
          $req_type->execute(array($don['id']));
          while($don_type = $req_type->fetch()){
            echo "<div class='type'>Type: <a href='type.php?id=".$don_type['w_id']."'>".$don_type['w_name']." </a></div>";
          }
          $req_type->closeCursor();
        echo "</div>";	
      }
      $req->closeCursor();
?>

Si j'ai bien compris le reste, récupérer tous les éléments (images et titre), puis faire une boucle de "echo" pour rajouter autant de <li> que nécessaire dans le slider ?

Cordialement

Bonjour,

Malheureusement, j'ai peur de ne pas comprendre. Le code suivant fonctionne ? :


Si j'ai bien compris le reste, récupérer tous les éléments (images et titre), puis faire une boucle de "echo" pour rajouter autant de <li> que nécessaire dans le slider ?

Cordialement

Oui c'est bien çà, sinon l'autre code est la récupération dans ma base de donnée de tout les éléments nécessaires (lien de l'image, son nom et son type) pour ensuite faire la boucle, mon soucis est vraiment de comment faire pour que lorsque je clique par exemple sur "Illustrator", qu'il ne m'affiche que les images qui ont comme type illustrator.

Désolé si j'ai du mal à me faire comprendre parce que j'ai du mal à me comprendre aussi.

Merci!

mon soucis est vraiment de comment faire pour que lorsque je clique par exemple sur "Illustrator", qu'il ne m'affiche que les images qui ont comme type illustrator.

Ha mais en fait, j'ai cru que vous aviez un problème dans la récupération et l'affichage des images et données dans le slider, autant pour moi.

Donc, l'idéal pour ce genre d'opération dynamique est le JavaScript. Cependant vous aurez sûrement meilleurs temps d'utiliser un plugin de slider prêt à l'emploi (pourquoi réinventer la roue). Si vous préférez quand même faire ça vous-même, je vous conseille d'aller chercher autour de l'événement "onClick" sur un lien du menu. Au click d'un lien, vous récupérez le contenu "Illustrator ou Photoshop etc.." et masquez les autres <ul> que vous identifierez par exemple avec des ID. Dans le style de :

<ul id="ulPhotoshop">
    <li>le contenu..</li>
</ul>
<ul id="ulCompositing">
    <li>le contenu..</li>
</ul>

Personnellement j'utilise jQuery pour ce genre d'opération, ça reviens assez simple. En espérant avoir pu vous aiguiller.