IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 5
    Points : 5
    Points
    5
    Par défaut [AJAX] Construction d'une galerie d'images avec Ajax
    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 .

    Donc j'ai fait cela :

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

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    tu passes en paramètre le numéro de l'image désiré a ton script php :

    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
    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é
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  3. #3
    Futur Membre du Club
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 5
    Points : 5
    Points
    5
    Par défaut
    Je post ce que j'ai fais (ça fonctionne) au cas où ça pourrait intéresser quelqu'un.

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 26/06/2010, 13h33
  2. [Article] Créer une galerie d'images avec :target
    Par Bovino dans le forum Publications (X)HTML et CSS
    Réponses: 4
    Dernier message: 09/02/2010, 20h01
  3. [CSS 3] Créer une galerie d'images avec :target
    Par Bovino dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 09/02/2010, 20h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo