Problème de modale

Résolu
patricia@84 Messages postés 106 Date d'inscription vendredi 27 novembre 2015 Statut Membre Dernière intervention 24 septembre 2023 - 26 déc. 2022 à 13:20
patricia@84 Messages postés 106 Date d'inscription vendredi 27 novembre 2015 Statut Membre Dernière intervention 24 septembre 2023 - 27 déc. 2022 à 11:45

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

1 réponse

patricia@84 Messages postés 106 Date d'inscription vendredi 27 novembre 2015 Statut Membre Dernière intervention 24 septembre 2023 9
27 déc. 2022 à 11:45

Bonjour,

J'ai résolu mon problème qui n'a rien à voir avec le script php... mais avec un javascript qui, de plus, ne concerne pas la galerie de photos problématque.

Ayant supprimé un script html (et son fichier javascript) d'une page de mon site, autre que la galerie, parce qu'il ne répondait pas à ce que je voulais, je l'ai remplacé par un autre (et son fichier javascript) qui correspondait davantage à mon besoin. Il a suffit que je remette le premier fichier javascript sur mon site (sans remettre le fichier html que j'avais supprimé) avec le lien dans le footer pour que tout fonctionne...

J'avoue ne pas comprendre... mais cela marche, c'est le principal.

Bonne journée à tous.

0