Modale et bdd

**patriciaprovence** · 26/12/2022, 17h56

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<html>
 
 <section class="gallery_area section_gap">
            <div class="container">
                <div class="section_title text-center">
                    <h2 class="title_color">Royal Hotel Gallery</h2>
                </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>
</html>

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<?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.

Bien cordialement,

Patricia

**ciocciu** · 26/12/2022, 20h07

bonsoir patricia
que dit ton inspecteur dans la console quand tu affiches ta modale ? y a t il des erreurs ?

**patriciaprovence** · 26/12/2022, 20h27

Mon inspecteur indique juste l'url de la page ainsi : https://nom_du_site.fr/image/ext/nom_de_l'image.jpg (image est le dossier qui comprend différents sous-dossiers dont un nommé "ext".) alors que la page de la galerie est https://nom_du_site.fr/galerie.php
Par contre, sur le template, l'url ne change pas lorsqu'on passe de la galerie à la modale, ce qui est normal puisqu'on conserve la galerie en arrière-plan.

**patriciaprovence** · 27/12/2022, 11h39

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.

**patriciaprovence** · 27/12/2022, 16h31

Bonjour,

Mon problème était résolu... sans l'être vraiment. C'est une erreur de syntaxe sur un autre fichier javascript qui m'a amené à la solution.

Mon logiciel Deamweaver m'indique une erreur sur le script "toggleHamburger.js". Comme je n'y connais rien en javascript, j'ai accédé à la console relative à ce script via Firefox. Celle-ci m'a indiqué : "Uncaught TypeError: $(...).datetimepicker is not a function" avec le nom du fichier "custom.js et le n° de la ligne concernée.

Ce que j'ignorais avant d'aller mettre mon nez dans le fichier "custom.js" (en général, je ne touche pas au contenu d'un fichier js), c'est que celui-ci contenait non seulement des fonctions de "bootstrap-datetimepicker", mais aussi de "simpleLightbox" qui est lié à la galerie...

Pourquoi cette incomptabilité entre eux deux, je ne sais pas, mais il m'a suffit de retirer les lignes concernant "bootstrap-datetimepicker" du fichier "custom.js" pour que tout rentre dans l'ordre. Plus besoin de "bootstrap-datetimepicker.js" que j'ai retiré du site pour que ma modale se comporte normalement.

Donc, problèmes actuels supprimés.

Bonne fin de journée.

Patricia

Modale et bdd

PHP & Base de données

Vue hybride

Discussions similaires

Partager

Partager