While vs Lightbox

par **moogli** » 10 avr. 2017, 09:28

salut,

je ne vais pas plus loin que cette ligne <div id="myModal" class="modal">

Il y a un id, un id doit être unique sinon il sert a rien

donc il faut que le nom de ton id soit dynamique (par exemple en utilisant l'id de la base concaténé à mymodal

va falloir aussi que tu modifies la fonction js openModal() pour avoir en paramètre le nom de la modale à ouvrir.

ou alors tu fait quelque chose de dynamique, tu utilises une seule modale avec des liens fixe vers une page php qui va retourner la bonne image (en paramètre de l'url l'id de la ligne et le N° de l'image a afficher).
oublie de gère la politique de cache pour éviter les requêtes récurrente et inutile.

@+

par **Nephilme** » 06 avr. 2017, 23:39

Bonjour à tous !
Un petit problème se pose devant moi depuis hier soir.. J'ai décidé d'ajouter une Lightbox à mon site.

J'ai trouver ce petit script qui m'a bien plu :
https://www.w3schools.com/howto/howto_js_lightbox.asp : W3school Lightbox.

Je possède donc une BDD comprenant plusieurs entrée dont notamment : image1, image2, image3. Trois images qu'un membre peut inséré quand il crée un article. Ces 3 images que j'ajoute à la lightbox.

Seulement, avec la boucle While comprise dans mon code, cela me pause problème : Quand je clique sur une image du 1er article = pas de problème. Mais quand je clique sur celle du 2eme article ( qui est sur la même page ) cela me fait pop l'image correspondant au 1er article ..
Voilà mon code :

<?php
session_start();
error_reporting(E_ALL); ini_set('display_errors', '1');
if(isset($_GET['id'])){ $idmembre=$_GET['id']; }
 
try
{
    // On se connecte à MySQL
$bdd = new PDO('mysql:host=xxx;dbname=xxxx', 'xxx', 'xxxx');
}
catch(Exception $e)
{
    // En cas d'erreur, on affiche un message et on arrête tout
        die('Erreur : '.$e->getMessage());
}
 
// Si tout va bien, on peut continuer
 
// On récupère tout le contenu de la table fiche_voiture
$reponse = $bdd->query('SELECT * FROM fiche_voiture WHERE id_membre='.$idmembre.' ORDER BY id');
// On affiche chaque entrée une à une
 
?>
 
<?php
while($donnees = $reponse->fetch())
{
    ?>
<?php include('lightbox.php'); ?>
 
<?php
}
// Termine le traitement de la requête
 
?>

lightbox.php :

<div class="row">
  <div class="column">
    <img src="photo/<?php echo $donnees['image1'];?>" onclick="openModal();currentSlide(1)" class="hover-shadow" style="width: 200px;">
  </div>
  <div class="column">
    <img src="photo/<?php echo $donnees['image2'];?>" onclick="openModal();currentSlide(2)" class="hover-shadow" style="width: 200px;">
  </div>
  <div class="column">
    <img src="photo/<?php echo $donnees['image3'];?>" onclick="openModal();currentSlide(3)" class="hover-shadow" style="width: 200px;">
  </div>
</div>
 
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
 
    <div class="mySlides">
      <div class="numbertext">1 / 3</div>
        <img src="photo/<?php echo $donnees['image1'];?>" style="width:100%">
    </div>
 
    <div class="mySlides">
      <div class="numbertext">2 / 3</div>
        <img src="photo/<?php echo $donnees['image2'];?>" style="width:100%">
    </div>
 
    <div class="mySlides">
      <div class="numbertext">3 / 3</div>
        <img src="photo/<?php echo $donnees['image3'];?>" style="width:100%">
    </div>
 
 
    <a class="prev" onclick="plusSlides(-1)" style="margin-left: -50%;">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
 
    <div class="caption-container">
      <p id="caption"></p>
    </div>
 
    <div class="column">
      <img class="demo" src="photo/<?php echo $donnees['image1'];?>" onclick="currentSlide(1)" alt="Nature"style="width: 200px;">
    </div>
 
    <div class="column">
      <img class="demo" src="photo/<?php echo $donnees['image2'];?>" onclick="currentSlide(2)" alt="Trolltunga" style="width: 200px;">
    </div>
 
    <div class="column">
      <img class="demo" src="photo/<?php echo $donnees['image3'];?>" onclick="currentSlide(3)" alt="Mountains" style="width: 200px;">
    </div>
 
 
  </div>
</div>

Je n'ai pas mis le code js ou Css. Puis.. je ne sais pas si je post dans la bonne partie du forum.
De plus, je ne sais pas si je fais bien d'ajouter ou même d’enregistrer comme ca mes images, mais je n'ai pas d'autres idées/solutions.

Voila.. J'espère avoir été assez clair et je vous remercie d'avance pour votre aide !
Bonne journée/soirée !

While vs Lightbox

Répondre

Étendre la vue Revue du sujet : While vs Lightbox

Re: While vs Lightbox

While vs Lightbox