Bonsoir, 

j'ai créé une lightbox pour un site web perso que je développe en ce moment. 

La lightbox s'utilise dans une gallerie de photo où les membres du site peuvent ajouter une photo d'un voyage en France ou à l'étranger et mettre le lieu, un titre, commentaire etc..

J'aimerai afficher dans la lightbox d'un côté l'image et de l'autre les informations de la photo et les commentaires susceptible d'être postés. 

La lightbox ne pose aucun problème au niveau du js mais plutot du css. 

Mon code html : 

<!-- The Modal/Lightbox -->
<div id="myModalLightbox" class="modal_lightbox">
   <span class="close_lightbox cursor" onclick="closeModal()">&times;</span>
    <div class="modal_lightbox-content">
      <?php
       $req_select = "SELECT * FROM post_photo, membre 
        WHERE post_photo.id_membre_post = 
        membre.id_membre"; 
        $res = $bdd->query($req_select); 
        $i = 1; 
        while($photo = $res->fetch()){
            $chemin = "uploads/".$photo['nom_photo']; 
       ?>    

       <div class="mySlides">
         <img src="<?= $chemin ?>" class="responsive">
             <!-- Next/previous controls -->
                <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                  <a class="next" onclick="plusSlides(1)">&#10095;</a>                    
                </div>
                <div class="myComments">
                   
                </div>

               <?php
                     $i+=1; 
                  }
               ?>

              </div>
            </div>

Mon CSS me pose un problème au niveau de l'image. J'aimerai que mon modal_lightbox-content soit aussi grand en hauteur que l'image et donc l'image et la partie à droite soit de même hauteur. Pour corser les choses, le modal soit être responsive biensur. Si certains ont des idées pour réaliser cela, je suis tout ouï. 

Mon code CSS : 

.modal_lightbox{
  display: none; 
  position: fixed;
  width: 100%; 
  height: 100%; 
  z-index: 1; 
  overflow: auto; 
  background-color: rgba(19, 15, 64,1); 
  top: 60px; 
}

.modal_lightbox-content{
  position: relative;
  top: 60px;
  background-color: white; 
  width: 80%; 
  margin-left: 10%;
  margin-right: 10%; 
}

.mySlides{
  width : 50%;
  float: left; 
  box-sizing: border-box;
  overflow: auto;
}

.mySlides img{
  max-width: 100%; 
  height: auto; 
}

.myComments{
  width: 50%; 
  margin-left: 50%;
  border-color: 1px solid white; 
}

Je remercie ceux et/ou celles qui prendront un peu de temps pour me donner une piste. 

Bonjour,

Quel rendu tu as avec ce code ? 

Peut tu nous faire une capture d'écran ? 

Cordialement