Bonjour,

Je suis débutant en informatique
Ma page web charge une liste d'images en faisant appel avec PDO à une BDD contenant 20 variables:

1 type
2 numero
3 taille
4 format
5 nom_1
6 nom_2
7 ref1
8 ref2
9 ref3
10 intitule
11 themes
12 technique
13 hauteur
14 largeur
15 annee_creation
16 serie
17 epreuve_artiste
18 description
19 technique_detail
20 slide

En cliquant sur une image celle-ci s'agrandit dans une div à l'aide d'un script jQuery
Je veux inserer dans cette div, en dessous des images, toutes les informations contenues dans la BDD concernant l'image cliquée
Aussi pouvez vous me dire si il y aune écriture qui me permettrait de récupérer ces infos en jQuery du style:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<script src="jquery.js"></script>
<script>
...
var annee_creation= <?php echo $annee_creation?>;
...
</script>
Voici le code de ma page:
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="UTF-8">
 
<head>
 
<body>
 
<div id="cadre_agrandissement"></div>
 
<?php
try{
$chaine_connexion='mysql:host=localhost;dbname=images_site';
$utilisation_UFT8=array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8");	
$connexion_bdd = new PDO($chaine_connexion, 'root', '', $utilisation_UFT8);	
$connexion_bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e){
$msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
die($msg);
}
 
$sql = 'SELECT * FROM liste_image WHERE taille=? ORDER BY RAND()';
$requete2 = $connexion_bdd ->prepare($sql);
$requete2->bindValue(1, 'petit', PDO::PARAM_STR);
$requete2->execute();
 
foreach($requete2->fetchAll() as $donnee)
{
    echo utf8_encode('<img src="' . $donnee['type'] . '' . $donnee['numero'] . 'petit.jpg" class="petit' . $donnee['format'] . ' ' . $donnee['type'] . '"/>');
}
 
$requete2 -> closeCursor();
$requete2 = NULL;
 
?>
 
<script src="jquery.js"></script>
<script>
 
$(function(){
 
		$('.petitportrait').css('border','5px white solid');	
 
		$('.petitportrait').on( "click", function(){
			$(this).css('border','5px black solid');
			var a = $(this).attr('id');	
			var b = $(this).attr('src');
			var c = $(this).attr('title');
			var d = $(this).attr('alt');
 
			var nom_img = $(this).attr('src');
			var nom1 = nom_img.charAt(0);
			var nom2 = nom_img.charAt(1);
 
			var e = b.replace('petit.jpg','grand.jpg');
			$('#cadre_agrandissement').html('<span class="fermer"><a id="lien" href="#">Fermer</a></span> <br> <img id="' +a+ '" src="' +e+ '" class="grandportrait" title="' +c+ '" alt="' +d+ '"/> <br> Intitulé: ' +c+ ' ');
			$('#cadre_agrandissement').animate({ 'height':'970px'}, 500).animate({ 'width': '880px'}, 500)
		});
 
		$('#cadre_agrandissement').on( "click", "#lien", function(){
			$('.petitportrait').css('border','5px white solid');
			$('#cadre_agrandissement').animate({'height' : '0px', 'width' : '0px'}, 500 );
			$('#cadre_agrandissement').empty();		
 		});	
 
});  
 
</script>
 
</body>
 
</html>
Cordialement