Visionneuse d'image depuis données dynamiques

**n1n0x** · 20/05/2012, 15h32

Bonjour.

J'espère être au bon endroit pour poster. J'ai l'intime conviction que la réponse me sera apportée en JavaScript, plutôt qu'en PHP ou bien même sur le forum dédié Ajax.

Bref, voici mon besoin :

J'ai une page codée en php, dans laquelle je récupère un ensemble d'informations d'une base MySQL, et notamment des noms de fichiers .jpg stockés sur le serveur, pour ensuite afficher ces images.

Maintenant, j'aimerais savoir quelle serait la meilleure solution pour me créer une petite routine pour afficher une image après une autre dans un ordre aléatoire, la nouvelle remplaçant celle d'avant après un refresh automatique (timer).

Je souhaite donc incorporer ce code dans ma portion <?php ?> pour ainsi pouvoir exploiter directement les chemins d'accès des images, stockées dans mon tableau 2D: $Series[][] (où par exemple $Series[0][2] contient "./image-toto.jpg").

Ainsi, pour simplifier, je voudrais savoir comment rafraichir l'affichage d'une image $Series[i][j] , dans le corps de ma page php, en faisant simplement varier mes $i et $j avec mt_rand() ...

Merci de votre aide. Et n'hésitez pas à me demander toute précision qui vous sera utile.

**Darkyl** · 28/05/2012, 01h12

Salut,

Peut-être la solution réside dans le passage de ton tableau php à un tableau javascript à la création de la page. (pour cela, fait toi le passage toi_même. Puis d'affecter un timer à ce tableau avec un Math.random() de l'index du tableau...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var tab=new Array()
tab[0]='test_1.png';
..etc

Ou alors tu fais un appel ajax en boucle qui rafraichit un div d'un fichier php. Ce dernier lit ta variable $nom_image_a_afficher, et change un src d'une image()... Bref, le tout étant géré par le fichier principale (genre index.php), l'image étant créer et affiché par le 2cd fichier...

Voila quoi, peut-être tu pourrais faire comme celà.. Enfin si cela est valide bien sûr...

**Willpower** · 28/05/2012, 03h41

D'abord, sache qu'une fois ta page "généré" par php et envoyé au client, tes variables php telles que tu les connais n'existent plus chez le client, tu devras donc les utiliser pour générer le html ou javascript voulu, qui eux seront interprété par le navigateur.

bref du coté de php tu auras donc un truc du genre :

Code php :

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
<body>
   <img id="mon_image" />
    <script type="text/javascript">
var mesImages = [
<?php
    $i = 0;
    echo "'".$Series[0][0]."'";
    while($Series[0][++$i]){
        echo ",'".$Series[0][0]."'";
    }
?>
];
setInterval(function(){
    document.getElementById('mon_image').src = mesImages[Math.floor(mesImages.length*Math.random())];
},2000); // toutes les 2 secondes
</script>
</body>

ce qui donnera une fois interprété par le serveur php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
   <img id="mon_image" />
    <script type="text/javascript">
var mesImages = [
'image0.jpg'
,'image1.jpg'
,'image2.jpg'
];
 
setInterval(function(){
    document.getElementById('mon_image').src = mesImages[Math.floor(mesImages.length*Math.random())];
},2000); // toutes les 2 secondes
</script>
</body>

**Darkyl** · 28/05/2012, 12h42

Yes, je cherchai partout ce petit bout de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var mesImages = [
<?php
    $i = 0;
    echo "'".$Series[0][0]."'";
    while($Series[0][++$i]){
        echo ",'".$Series[0][0]."'";
    }
?>
];

Mais dans un fichier .js , comment écrire du php... Mon coloriseur syntaxique, il veut pas lui ...

Bon, moi, c'est des object, contenant d'autres object, qui peuvent être des tableaux, contenant ... qu'il me faudrait de javascript à php en vue d'une sauvegarde d'environnement javascript.

Heu, elle existe pas cette fonction?

A, pour ton delai de changement d'images, tu dois peut-être tenir compte du temps de chargement de l'image (la première fois qu'il tombe dessus)..

**Willpower** · 28/05/2012, 13h28

oui, il y a toutes sortes de fonctions php pour formater et afficher des données, implode, json_encode, var_dump, ou des trucs du genre, là je montrais un exemple simple avec une boucle et des echos.

pour le fichier .js tu fais pareil mais tu renomes le fichier en .php

dans ta page html, tu peux inclure des .php comme script :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="monscript.php" ></script>

mais il vaut mieux mettre un header au début de ton fichier pour spécifier le type :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

 header("Content-type: text/javascript");

**n1n0x** · 01/06/2012, 15h02

Bonjour,

et merci pour vos réponses! Je n'ai pas encore testé, mais je pense que ca répond parfaitement à mon besoin.

Par contre, une remarque: pourquoi ne pourrais-je pas "indenter" le code javascript DANS mon <? php ?> initial, là où se trouve déjà le tableau avec les liens (src) de mes images à afficher aléatoirement ?
Suffit de faire des echo"" correctement pour les quelques lignes de ton javascript, non ?

Merci d'avance.

**Darkyl** · 01/06/2012, 15h12

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
<body>
   <img id="mon_image" />
    <script type="text/javascript">
var mesImages = [
<?php
    $i = 0;
    echo "'".$Series[0][0]."'";
    while($Series[0][++$i]){
        echo ",'".$Series[0][0]."'";
    }
?>
];
setInterval(function(){
    document.getElementById('mon_image').src = mesImages[Math.floor(mesImages.length*Math.random())];
},2000); // toutes les 2 secondes
</script>
</body>

Ca te vas pas ça? (la solution de Willpower)

Qu'est-ce que tu veux indenter?o juste...

**SpaceFrog** · 01/06/2012, 15h16

Je preconise plutot un array d'images, pas de string ...

ça permet de preloader les images ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
tabimages=new Array();
 
tabimages[0]=new Image()
tabimages[0].src="image1.png"
 
tabimages[1]=new Image();
tabimages[0].src="image2.png"

**n1n0x** · 01/06/2012, 15h21

Cad que j'aurais vu quelque chose comme ca :

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
 
echo "<img id=\"show_image\" />";
    							echo "<script type=\"text/javascript\">";
								echo "var mesImages = [";
 
   								$k = 0;
   								echo "'".$Series[1][1]."'";
   								while($k < 20)
   								{
   									$i = Math.floor($Series[0][0]*Math.random()+1)
   									$j = Math.floor($Series[$i].length*Math.random()+1)
   									echo ",'".$Series[i][j]."'";
   									$k++;
   								}
   								echo "];";
 
								echo "setInterval(function(){";
   								echo "document.getElementById(\'show_image\').src =mesImages[Math.floor(mesImages.length*Math.random()+1)];";
								echo "},2500)"; // toutes les 2,5 secondes
								echo "</script>";

EDIT >>>>>>

En fait, c'est même pas ce que je veux faire ci-dessus. Puisque je suis en train de déjà créér de l'aléatoire lorsque je charge le tableau mesImages. Ce qui n'a pas de sens, puisque c'est après, dans la fonction javascript, qu'il y a un tri aléatoire pour afficher.

Ce qu'il me faut simplement donc, c'est ranger mes images de $Series[][] au plus simple, ou bien carrément faire appel à ce tableau dans le tri aléatoire lors de l'inclusion des chemins d'accès des images !

Pourquoi donc devoir faire un mesImages supplémentaire, si j'ai déjà un tableau nickel? On ne peut pas s'en servir dans le snippet javascript?

Je précise pour que vous compreniez, la structure de mon tableau:

// Codification tableau:
// $Series[0][0] stocke le nombre total de séries enregistrées ($nbSeries).
// $Series[i][0] stocke le TITRE de chaque série i.
// Par conséquent, la 1ère image de la 1ère série est $Series[1][1] ...

// $Series[i][j] stocke le nom de fichier de la j-ième image (position) de la série i.

Mais peut être que je suis en train de me prendre les pieds dans le tapis ??? Faire du javascript dans du php, puis dans le code javascript y inclure des variables et du code php ???

**n1n0x** · 01/06/2012, 15h30

A la suite directe de mon dernier message ci-dessus, que pensez-vous de ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
echo "<img id=\"show_image\" />";
echo "<script type=\"text/javascript\">";
 
    		$i = Math.floor($Series[0][0]*Math.random()+1)
   		$j = Math.floor($Series[$i].length*Math.random()+1)
 
		echo "setInterval(function(){";
   		echo "document.getElementById(\'show_image\').src =$Series[i][j];";
		echo "},2500)"; // toutes les 2,5 secondes
echo "</script>";

Ai-je le droit ? Est-ce que ca peut fonctionner ?

**SpaceFrog** · 01/06/2012, 15h31

considère php comme une machine à ecrire puis a expedier du js vers le navigateur du client ...

regarde en suite le code source de la page une fois arrivé sur le client

le js n'est interprété que coté client

**Darkyl** · 01/06/2012, 15h36

heu, j'ai toujours pas compris pourquoi tu te prenez la tête.

Fais toi une fonction javascript qui transforme ton tableau php en javascript (une fonction dynamique, ce sera plus facile pour la maintenance) et c'est tout...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
tabimages=new Array();
 
tabimages[0]=new Image()
tabimages[0].src="image1.png"
 
tabimages[1]=new Image();
tabimages[0].src="image2.png"

Trés bonne idée... Optimisation, quand tu nous tiens...

J'ai mis beaucoup de temps à comprendre la séparation de php et de javascript, comme tout bon amateur que je suis.
Essaye de passer une variable javascript à un fonction php sans passer par get...

Ai-je le droit ? Est-ce que ca peut fonctionner ?

Ben, je sais pas, ca marche sur ton navigateur ?

**n1n0x** · 01/06/2012, 15h45

Envoyé par SpaceFrog

considère php comme une machine à ecrire puis a expedier du js vers le navigateur du client ...

regarde en suite le code source de la page une fois arrivé sur le client

le js n'est interprété que coté client

Oui, je crois avoir compris celà, mais là où mon cerveau déraille un peu c'est au niveau de l'imbrication de l'un et l'autre des langages.

Du coup, ca voudrait dire que ma proposition suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
echo "<img id=\"show_image\" />";
echo "<script type=\"text/javascript\">";
 
    	$i = Math.floor($Series[0][0]*Math.random()+1)
   	$j = Math.floor($Series[$i].length*Math.random()+1)
 
	echo "setInterval(function(){";
   	echo "document.getElementById(\'show_image\').src =$Series[i][j];";
	echo "},2500)"; // toutes les 2,5 secondes
echo "</script>";

...n'est pas bonne car ca ne vas pas "boucler" sur plusieurs valeurs distinctes de $i et $j puisque ces variables sont instanciées par php, qui ne sera donc exécuté qu'une seule et unique fois, lors du chargement de la page. C'est bien ça ?

**SpaceFrog** · 01/06/2012, 15h50

lors du chargement de la page.

non pas du chargement ...

lorsque tu pointes sur un page php depuis ton navigateur

chronologiquement :

le serveur interprète le code php qui redige le code html

ce code html est envoyé par le serveur

ton navigateur charge le code reçu
interprète le html le je et le css

**n1n0x** · 01/06/2012, 16h13

Ok SpaceFrog.

Alors pour résumer avec la solution de Willpower et les conseils de SpaceFrog sur la définition d'objets Image, que pensez-vous de ceci :

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
 
echo "<img id=\"show_image\" />";
 
echo "<script type=\"text/javascript\">";
 
 
 
    	echo "mesImages=new Array();";
 
        $i = 1; $j = 1; $k=0;
 
        while($Series[$i][$j])
 	{
 		echo "mesImages[".$k."] = new Image();";
 		echo "mesImages[".$k."].src =\"".$Series[$i][$j]."\"";
 	}
 
	echo "setInterval(function(){";
   	echo "document.getElementById(\'show_image\').src";
   	echo "=mesImages[Math.floor(mesImages.length*Math.random())];";
	echo "},2500)"; // toutes les 2,5 secondes
	echo "</script>";

On est bien cette fois-ci ?

En javascript, il n'y a pas de ";" à chaque fin de ligne systématiquement, SpaceFrog ? Ou c'était un oubli de ta part plus haut dans ton exemple de déf. de new Array() et new Image() puis affectation des valeurs aux variables objets Image.src ?

**SpaceFrog** · 01/06/2012, 16h25

c'est "facultatif" on va dire...

il est en effet préferable de ne pas les oublier su tu veux compresser le code par la suite, mais ce n'est pas bloquant, un retour ligne etant considéré comme une fin d'instruction

**n1n0x** · 01/06/2012, 16h59

Entendu.

Bien, merci à tous !

J'espère que j'arriverai à résoudre une maudite erreur php pour enfin pouvoir voir le résultat final !

(Parse error: syntax error, unexpected T_ELSE) ...

Je marque ici comme RESOLU quoiqu'il en soit !

**SpaceFrog** · 01/06/2012, 17h09

manque un ; en php quelque part

**n1n0x** · 09/06/2012, 15h12

Bonjour.

Je relance ce topic, car j'ai une autre question javascript dans un contexte de visionneuse d'image mais par clic "next" et "previous" , comme sur ce site:

http://www.florianbricogne.com/index...ste-avant-que/

Comment faire la même chose dans mon cas ?

J'en suis là, mais je sèche :

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
 
echo "<img id=\"currentPic\" border=\"0\" />";
    		echo "<script type=\"text/javascript\">";
    		echo "mesImages=new Array();";
 
    			$j=1; $k=0;
				while($Series[$browsedID][$j]!=NULL)
				{
					echo "mesImages[".$k."] = new Image();";
 					echo "mesImages[".$k."].src =\"".$Series[$browsedID][$j]."\";";
 					$k++; $j++;
				}
 
 
			echo "setBrowsed(function(){";
   			echo "document.getElementById(\'currentPic\').src";
			echo "})";
    		        echo "</script>";

1ère étape: On charge les images dans l'ordre de défilement depuis $Series[][] (instancié dans mon code php) vers le tableau d'objet JScript Image, mesImages[].

2è: créer les balises <a href="" onclick="setBrowsed()">previous</a> et pareil pour next.

Comment identifier en paramètre de ma fonction l'index de l'image courante, et précédente, suivante (mesImages[0], mesImages[1], mesImages[2], ...) ?

Merci bcp.

Invité · 09/06/2012, 16h33

slt,

stu veux tu fais des raisonnements logiques qui sont corrects.
Mais ton approche est mauvaise.

Que doit te retourner php?
Que doit tu faire coté client (javascript)?

Je pense que t'es flou de ce point de vue là.

Si tu avais porté plus d'attention au poste 28/05/2012 03h41 de willpower tu aurais constaté que :
il y a une partie php : celle ou on ecrit le tableau d'image
et une partie javascript indépendante (ou ya que du javascript, pas d'echo ou autre)

Donc déjà, ca

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
echo "<img id=\"currentPic\" border=\"0\" />";
    		echo "<script type=\"text/javascript\">";
    		echo "mesImages=new Array();";
 
    			$j=1; $k=0;
				while($Series[$browsedID][$j]!=NULL)
				{
					echo "mesImages[".$k."] = new Image();";
 					echo "mesImages[".$k."].src =\"".$Series[$browsedID][$j]."\";";
 					$k++; $j++;
				}
 
 
			echo "setBrowsed(function(){";
   			echo "document.getElementById(\'currentPic\').src";
			echo "})";
    		        echo "</script>";

c'est nul pour la lisibilité. Quand tu as pas besoin de php, passes t'en si tu peux

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
<script machin>
var mesImages=[]; //prefere aussi cette déclaration à new Array qui date des années 1990...
<?php
//tu conserves cette partie car t'as besoin de php
$j=1; $k=0;
				while($Series[$browsedID][$j]!=NULL)
				{
					echo "mesImages[".$k."] = new Image();";
 					echo "mesImages[".$k."].src =\"".$Series[$browsedID][$j]."\";";
 					$k++; $j++;
				}
?>
setBrowsed(function(){
document.getElementById('currentPic').src;
})
</script>

à la syntaxe du copier coller prêt.

Ya deux choses. Déjà c'est mieux pour la lisibilité, et de surcroit, ca te permet de savoir ou tu veux, si tu as besoin du serveur ou pas.
Pour ton bouton next, d'après toi, tu as besoin de quoi? du serveur, de javascript, des deux?

Visionneuse d'image depuis données dynamiques

JavaScript

Discussions similaires

Partager

Partager