Discussion :

[gefriche]

J'ai une base de données contenant plusieurs tables dont l'une contient notamment les adresses des photos, avec leurs noms, leurs catégories et deux colonnes à remplir, un compteur de vues et un compteur de téléchargement.

Extraction, une à une, de toutes les photos correspondant à une sélection :

Code :

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

1
2
3
4
5
6
7
8
9
10
<?php
 
				for ($i=0 ; $i < $result->num_rows ; $i++) {
					$row = $result->fetch_assoc() ;
					$id = $row['id'];
					$path_img = $row['path_img'];
					$path_img400 = $row['path_img400'];
					$path_img1020 = $row['path_img1020'];
					$description = $row['description'];
					$id_members = $row['id_members'];

Je recherche le prénom, le nom et le pays d'origine de l'auteur de la photo dans la table correspondante :

Code :

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

1
2
3
4
5
6
7
$result1 = $conn->query('SELECT firstname, lastname, email, country FROM members WHERE id = "' . $id_members . '"');
					if ($result1) {
						$row1 = $result1->fetch_assoc();
						$firstname = $row1['firstname'];
						$lastname = $row1['lastname'];
						$country = $row1['country'];
					}

Conception, photo par photo, de la page de visualisation :

Code :

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

1
2
3
echo '<div class="grid2">';
					echo '<a href="' . $path_img . '" data-fancybox data-caption="' . $description,'<br>',$firstname,' ',$lastname,' - ',$country . '" style="margin: 5px;"><img src="' . $path_img400 . '" alt="" /></a>';
					echo '</div>';

Fin de la boucle :
}
$result->free();
?>

Le script Fancybox de fin de page :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
		<script type="text/javascript">
                        $("[data-fancybox]").fancybox({
                                // Les options
                                preventCaptionOverlap: true,
                                buttons: [
                                        "zoom",
                                        "fullScreen",
                                        "download",
                                        "thumbs",
                                        "close"
                                ],
                                animationEffect: "zoom-in-out",
                                transitionEffect: "tube",
                        });
                </script>

La page de présentation du résultat est bien responsive, le click sur une photo provoque bien sa présentation (avec la description de la photo saisie par l'auteur, son prénom, son nom et son pays) et les possibilités de téléchargement, d'agrandissement et de fermeture qui fonctionnent.

Je ne parviens pas à retrouver le nom de la photo cliquée pour implémenter l'un des deux, ou les deux compteurs (si besoin) de la table correspondante.

Pouvez-vous m'aider ?

[mathieu]

est ce que c'est bien le script fancybox que vous avez trouvé sur fancyapps.com ?
regardez là, il y a un exemple de code pour gérer l'évènement "click" :
http://fancyapps.com/fancybox/3/docs/#api

[gefriche]

Oui, c'est bien le script fancybox trouvé sur fancyapps.com.
Merci pour votre réponse.
Cependant, je ne vois pas comment trouver le nom de la photo affichée.
Avez-vous une idée ?
Bien à vous, gefriche

[gefriche]

J'ai modifié la ligne de présentation d'une photo avec l'ajout onclick :

Code :

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

1
2
3
echo '<div class="grid2">';
					echo '<a id="' . $id . '" onkeyup="counter("' . $id . '")" class="d-block mb-4" href="' . $path_img . '" data-fancybox data-caption="' . $description,'<br>',$firstname,' ',$lastname,' - ',$country . '" style="margin: 5px;"><img class="img-fluid" src="' . $path_img400 . '" alt="" /></a>';
					echo '</div>';

J'ai inséré le script counter.js :

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
function counter(itemId) {
				if (window.XMLHttpRequest){
				// code for IE7+, Firefox, Chrome, Opera, Safari
            	xmlhttp=new XMLHttpRequest();
       			}
       			else {
		   		// code for IE6, IE5
            	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       			}
       			xmlhttp.onreadystatechange=function(){
       				if (xmlhttp.readyState==4 && xmlhttp.status==200){
            	}
       		}
       		xmlhttp.open("GET","localhost/phplogin/counter.php?itemId="+itemId,true);
       		xmlhttp.send();
			}

Pour envoyer au serveur l'article à incrémenter par counter.php (dans l'exemple ci-dessous, le compteur de viewed) :

Code :

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

1
2
$sql = "UPDATE img set viewed = (viewed + 1) WHERE id = '$itemId'";
        $result1 = mysqli_query($conn, $sql);

Mais rien ne fonctionne !!