Problème de modale

Bonjour,

Tout d'abord de vous adresse tous mes vœux pour la Nouvelle Année.

Je suis en train de préparer un cadeau surprise à une amie en lui faisant un site pour son gîte rural. Je suis partie sur un template que j'ai téléchargé auquel j'ai ajouté une partie administration afin que mon amie, qui ne sais pas coder, puisse notamment ajouter ou modifier des images en insérant les noms de celles-ci dans une base de données mysql.

Je bloque depuis 4 jours sur une galerie, et plus précisément sur sa modale fonctionnant avec un script "lightbox" javascript qui fonctionne très bien sur le template. Cette galerie en html est codée ainsi :  

     <section class="gallery_area section_gap">
            <div class="container">
                <div class="section_title text-center">
                    <h2 class="title_color">Royal Hotel Gallery</h2>
                    <p>Who are in extremely love with eco friendly system.</p>
                </div>
                <div class="row imageGallery1" id="gallery">
                    <div class="col-md-4 gallery_item">
                        <div class="gallery_img">
                            <img src="image/gallery/01.jpg" alt="">
                            <div class="hover">
                            	<a class="light" href="image/gallery/01.jpg"><i class="fa fa-expand"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 gallery_item">
                        <div class="gallery_img">
                            <img src="image/gallery/02.jpg" alt="">
                            <div class="hover">
                            	<a class="light" href="image/gallery/02.jpg"><i class="fa fa-expand"></i></a>
                            </div>
                        </div>
                    </div>
         <!-- etc  -->
                </div>
            </div>
        </section>

Je ne vous ai mis que les lignes qui affichent deux photos. A partir de <div class="col-md-4 gallery_item">, elles se répètent autant de fois qu'il y a de photos. J'ai voulu adapter ce script en utilisant les photos dont les noms figurent dans la bdd. Aucun problème pour les récupérer et afficher la galerie, mais là où ça coince, c'est concernant la modale.

J'ai modifié le script ainsi :

<?php
echo '<section class="gallery_area section_gap">';
	echo '<div class="container">';
		echo '<br><br>';
		echo '<div class="section_title text-center">';
	
		echo ' <h3 class="title_color">L\'extérieur du gîte</h3>';

			echo ' <div class="row imageGallery1" id="gallery">';
            
// requete pour récupérer les photos, la bdd contenant des photos de l'éxtérieur et de l'intérieur du gîte
$result = mysqli_query($bdd, "SELECT * FROM media WHERE lieu='exterieur'")or die(mysqli_error($bdd));
while($row = mysqli_fetch_array($result)){ 
$id = $row['id'];
$nom = $row['nom'];
$photo = $row['photo'];
					
				echo '<div class="col-md-4 gallery_item">';
					echo '<div class="gallery_img">';
					
                 	echo '<img alt="'.$nom.'" src="image/ext/'.$photo.'">';
					
					 	echo '<div class="hover">';
						
						echo '<a class="light" href="image/ext/'.$photo.'"><i class="fa fa-expand"></i></a>';
  						echo '</div>';
					echo '</div>';
				echo '</div>';		
  }             			
			echo '</div>';
		echo '</div>';
	echo '</div>';
echo ' </section>';
?>

Lorsque je clique sur la photo, au lieu d'une modale avec sa transparence et ses boutons, je n'ai qu'une photo agrandie sur fond noir.

Je suppose donc que pour la modale fonctionne, il faudrait que chaque photo ait ses propres lignes de code comme pour le script html (je ne sais pas si je suis très claire dans mon explication...)

Mais là, ma mémoire de vieille (71 ans) me fait défaut et je ne me sais pas comment déterminer une variable différente pour chaque photo, du genre $photo1, $photo2, etc.

Merci de votre aide.

Bonne journée,

Patricia

Macintosh / Firefox 78.0