Fancybox : identifier la photo cliquée et/ou la photo téléchargée

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 :

<?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 :

					$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 :

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 de fin de page :

<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 ?

Bonjour,
Il faut que ton serveur reçoive cette info lorsque tu cliques sur ton image pour la télécharger.

A partir d'un lien, il te faudra utilisé $_GET pour que ton serveur puisse traiter l'information.

ex download.php?id=id_de_l_image

download.php peut traiter cette valeur qu'il reçoit et mettre à jour ta bdd et via un header(location : adresse_de_l_image_a_partir_de_l_id ) ; // syntaxe à vérifier + penser aux header aussi correspondant au fichier, renvoyer vers l'image à télécharger.

Je ne sait a quel point fancybox peut-être configure, je pense que ces liens devront être générer en même temps que tes images, ou éventuellement le stocké dans un attribut pour être repris comme valeur du lien de téléchargement (voir http://fancyapps.com/fancybox/3/docs/#faq-2 )

cdt
Modifié par gcyrillus (10 May 2021 - 15:28)

Merci pour votre réponse !
Je supposais cela, créer un lien au moment de "création" de la présentation image.
Cependant, je ne vois absolument pas comment faire, par l'intermediaire d'un json ou d'un objet jQuery...
A quel endroit ?
Bien à vous, gefriche

Voici l'idée de base , en reprenant l'exemple de base et en modifiant légèrement le lien de la doc pour mettre ton lien de téléchargement sous l'image.
https://codepen.io/gc-nomade/pen/WNpQxoN

L’exemple repris que je te met reprend ici l'adresse de l'image, il te resterait à comparer dans download.php la valeur de $_GET['img'] aux liens des image que tu stockes en BDD et une fois sur l'enregistrement, tu incrémente le champ qui sert de compteur a cette image et avant d'afficher quelque chose tu redirige avec header( location : url ) vers l'image en question.

Cdt,

Merci pour votre réponse.
Cependant, je ne parviens pas à retrouver l'instance de l'élément affiché pour le passer au serveur par $_GET.
J'ai essayé cela :

echo '<div class="grid2">';
					echo '<a id="' . $id . '" onclick="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>';

avec counter.js :

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","counter.php?itemId="+itemId,true);
       		xmlhttp.send();
			}

qui se branche sur le serveur avec counter.php :

if (isset($_GET['itemId'])) {

    $query = "SELECT * FROM img WHERE id = '$itemId'";
    $result = mysqli_query($conn, $query);
	
    if (!empty($result)){// Si itemId est trouvé dans la table img on incrémente le compteur viewed
		$sql = "UPDATE img set viewed = (viewed + 1) WHERE id = '$itemId'";
        $result1 = mysqli_query($conn, $sql);

Mais rien ne fonctionne !

Hello,
Your server must receive this info when you click on your image to download it.

From a link, you will need to use $ _GET so that your server can process the information.

eg download.php? id = id_de_l_image

Isn't that what i am doing below?

xmlhttp.open("GET","counter.php?itemId="+itemId,true);
       		xmlhttp.send();

What should i do that i am not doing or doing wrong!?

Merci !

[lang=en]Looks like you have typos in your counter() function :
One of them, I guess, should be morelike:

xmlhttp.open("GET","counter.php?itemId='+itemId+',true");

[lang=fr]Il semble y avoir des fautes de syntaxe dans ta fonction counter() , voir code ci-dessus.
Modifié par gcyrillus (14 May 2021 - 13:50)

I made the modification, but it does not change anything!

Qu'est ce qui ne fonctionne pas?

La connexion au site par le script js,
la réception du $_GET par le script php,
La connexion à la bd,
La mise à jour de la valeur stockée,
Autre?
...

Cdt

Je pense que la connexion entre le site et le script.js et/ou la réception du $_GET dans le script.php ne fonctionne(nt) pas.
Bien à vous, Gérard

J'ai ajouté une balise <span id="msg"></span> sous la conception de la grille de présentation des photos :

// Conception de la grille de présentation des photos
					echo '<div class="grid2">';
					echo '<a id="' . $id . '" onclick="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>';
					echo '<span id="msg"></span>';

J'ai testé le fonctionnement de la function counter.js en ajoutant msg.innerText = itemId

afterShow : function( instance, current ){
    			var itemId = current.opts.$orig.attr('id');
				counter(itemId);
				msg.innerText = itemId;		
				}

Par conséquent, si l'envoi est bon vers le serveur, c'est la réception par ce dernier qui ne fonctionne pas.
Avez-vous une idée ?