Fancybox : identifier la photo cliquée

Version imprimable

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:

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:

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:

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:

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 ?

10/05/2021, 18h50
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
11/05/2021, 12h16
gefriche

Il s'agit bien du script Fancybox

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

ajout script XMLHttpRequest

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

Code:

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:

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:

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

Mais rien ne fonctionne !!