[AJAX] Construction d'une galerie d'images avec Ajax

Version imprimable

Voir la discussion initiale : http://www.developpez.net/forums/sho...d.php?t=473947

Donc pour suivre ce que je voulais faire, j'ai essayé de faire quelque chose en Ajax mais j'avoue que c'est très flou. Le sujet n'est d'ailleurs plus au bon endroit mais c'est pour pas perdre le fil :roll: .

Donc j'ai fait cela :

Code:

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
function getXhr()
			{
				var Xhr = null;
				if(window.XMLHttpRequest)
					xhr = new XMLHttpRequest();
				else if (window.ActiveXobject)
				{
					try
					{
						xhr = new ActiveXobject("Msxml2.XMLHTTP");
					}
					catch (e) 
					{
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
				}
				else
				{
					xhr = false;
				}
 
				return xhr;
			}
 
			function go()
			{
				var xhr = getXhr();
				xhr.open("GET","corps/test.php",true);
				xhr.send(null);
 
				xhr.onreadystatechange = function()
				{
					if(xhr.readyState == 4 && xhr.status == 200)
					{						
						document.getElementById('imgDef').innerHTML = xhr.responseText;
					}
				}
 
			}

avec la page test.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
 
	mysql_connect('localhost','root','');
	mysql_select_db('directduchateau');
 
	$sql=mysql_query("SELECT * FROM selection WHERE numeroImage=1");
 
 
	$data=mysql_fetch_array($sql);
	$photo=$data['photo'];
	$nom=$data['nom'];
	echo "<div id='test'>";
		echo "<img src='$photo'>";
	echo "</div>";
	echo "<div id='test1'>";
		echo "$nom";
	echo "</div>";
?>

J'ai bien mon image 1 et le texte 1 que j'ai dans ma BDD qui s'affiche.

Comment faire pour passer en paramètre chaque "numéro" des miniatures afin de les faire défiler par la suite ?

Merci de votre aide.

tu passes en paramètre le numéro de l'image désiré a ton script php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function go(cible)
			{
				var xhr = getXhr();
				var url = "ajax.php?id="+cible;
				xhr.open("GET",url,true);
				xhr.send(null);
 
 
				xhr.onreadystatechange = function()
				{
					if(xhr.readyState == 4 && xhr.status == 200)
					{						
						document.getElementById('imgDef').innerHTML = xhr.responseText;
					}
				}
 
			}

ou cible représente ton image désiré :)

Je post ce que j'ai fais (ça fonctionne) au cas où ça pourrait intéresser quelqu'un.

Code:

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
i=1;
NbMax=9;
 
function getXhr()
			{
				var Xhr = null;
				if(window.XMLHttpRequest)
					xhr = new XMLHttpRequest();
				else if (window.ActiveXobject)
				{
					try
					{
						xhr = new ActiveXobject("Msxml2.XMLHTTP");
					}
					catch (e) 
					{
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
				}
				else
				{
					xhr = false;
				}
 
				return xhr;
			}
function go()
{
	var xhr = getXhr();
 
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && xhr.status == 200)
		{						
			document.getElementById('imgDef').innerHTML = xhr.responseText;
		}
	}
 
	xhr.open("POST","corps/test.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("img="+a);
 
}		
 
function voir()
{
	if (i<=NbMax)
	{
		a = i;
		go();
		Defil = setTimeout('voir()',5000);
		i++;
	}
	else
	{
		a = 1;
		i = 1;
		go();
		Defil = setTimeout('voir()',5000);
		i++;
	}
}
 
function stop()
{
	clearInterval(Defil);
}
 
function relance()
{
	Defil = setTimeout('voir()',2000);
}

et la page php :

Code:

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
$id=$_POST['img'];
	$sql=mysql_query("SELECT * FROM selection WHERE numeroImage='$id'") or die(mysql_error());
 
	$data=mysql_fetch_array($sql);
	$photo=$data['photo'];
	$nom=$data['nom'];
	$commentaire=$data['commentaire'];
	$prix = $data['prix'];
 
	echo "<div id='test'>";
		echo "<img src='$photo'>";
	echo "</div>";
 
	echo "<div id='test1'>";
		echo "$nom";
 
	echo "</div>";
 
	echo"<div id='test2'>";
		echo "$commentaire";
	echo "</div>";
 
	echo"<div id='test3'>";
		echo "$prix &euro";
	echo "</div>";