Visionneuse d'image depuis données dynamiques

Version imprimable

20/05/2012, 15h32
n1n0x

Visionneuse d'image depuis données dynamiques

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.
28/05/2012, 01h12
Darkyl
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:

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

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:

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:

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>

28/05/2012, 12h42
Darkyl
Yes, je cherchai partout ce petit bout de code :
Code:

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]."'"; } ?> ];
:ccool:

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

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

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)..
28/05/2012, 13h28
Willpower

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:

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

header("Content-type: text/javascript");
01/06/2012, 15h02
n1n0x

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.

Code:

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

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

ça permet de preloader les images ...
Code:

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"

Cad que j'aurais vu quelque chose comme ca :
Code:

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:

Citation:

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

:aie:

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

Code:

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 ?

01/06/2012, 15h31
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
01/06/2012, 15h36
Darkyl
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:

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

Citation:

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

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

Citation:

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:

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 ?

01/06/2012, 15h50
SpaceFrog

Citation:

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

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:

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 ?

01/06/2012, 16h25
SpaceFrog

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
01/06/2012, 16h59
n1n0x

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 !

:ccool::ccool:
01/06/2012, 17h09
SpaceFrog

manque un ; en php quelque part

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:

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.

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:

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:

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?

09/06/2012, 17h37
n1n0x

Oui, je vois bien ce que tu veux dire.
Je sais bien qu'en l'état, mon code est un gruyère et ça me créé plus de complications qu'il n'en faut. Pour preuve, ces fameuses erreurs php unexpected T_CASE ...

Pour ce qui concerne du next et prev, c'est du local donc javascript est le bon emploi. J'ai bon?
Seulement je ne pige que dalle à la syntaxe du javascript.

Merci qd même.
09/06/2012, 17h44
Invité

Citation:

Pour ce qui concerne du next et prev, c'est du local donc javascript est le bon emploi. J'ai bon?

oui, donc le code php on y touche plus, sinon c'est fusillade :massacre:

Citation:

Seulement je ne pige que dalle à la syntaxe du javascript.

c'est un autre problème.

peux-tu commencer par décrire ce que tu attends des boutons next et prev?
09/06/2012, 17h51
n1n0x

Ben... l'idée c'est que j'ai stocké les chemins d'accès d'un certain nombre d'images dans le fameux array mesImages[].

Je veux donc exploiter ma galerie en affichant la première photo par défaut, puis en haut (ou en bas - peu importe) de la photo, avoir des hypertextes "prev | next" cliquables.

-> prev : ne doit être un lien cliquable que si la photo affichée actuellement est différente de la première (mesImages[0]) de la série. Dans ce cas, le lien rafraichira la zone <img> pour afficher la photo précédente (décrement de l'index courant) de la série.

-> next : trivial. cette fois-ci, si la dernière photo est atteinte, next n'aura pas pas de balise <a href></a> mais sera un simple texte non cliquable.
09/06/2012, 19h03
Invité

c'est bien mieux ainsi, car tu es clair dans ce que tu veux.

Je te conseille l'approche suivante :
tu prends 5 images. Et tu fais comme si elles sortaient de ta base de données. Cad un truc basique style,
$series[0][0]='lol'
$series[0][1]='mypicture.png',
etc
de sorte que tu aies toujours les même 5 images dans le même ordre.

En javascript, tu ne te préoccupes pas des boutons, mais tu crèes dans un premier temps une fonction next.
Et tu appèles cette fonction.
Cette fonction doit:
Si l'indice est la fin de ton tableau: ne rien faire
Sinon, incrémenter l'indice et modifier la source de ton image

Comme tu as appelé ta fonction, ben tu vérifies que l'image que tu affiches est bien la seconde.

Et seulement si ca marche tu crèes ton bouton (et tu rajoutes l'evènement onclick en appelant la fonction next que tu viens de créer)

Tu noteras que côté javascript tu as besoin d'une variable globale (qui est l'indice de l'image qui est actuellement affichée de ton teableau (donc en l'occurrence initialisée à 0))
11/06/2012, 09h52
n1n0x

Salut galerien.

Tu m'as compris. Sauf que tu me surestimes bcp pour la réalisation du javascript...

Bon, je vais faire les recherches qu'il faut pour me lancer.

Mais sois cool aussi, parce que tes "<script machin> ... </script>" par exemple, ne m'aident pas à structurer ce langage obscur. :(
11/06/2012, 09h59
Invité

poste de willpower du 28/05/2012, 03h41
tu as la declaration a la syntaxe correcte correspondant a mon script machin.

Citation:

Bon, je vais faire les recherches qu'il faut pour me lancer.

Tu as tous les elements en main. S'il y a des points incompris apres les differentes interventions sur cette discussion, c'est ici que tu trouveras les reponses en posant des questions (precises :ccool:)

Bonjour.

Je n'ai eu le temps que maintenant de revenir sur mon bout de code, et je n'arrive toujours pas à faire fonctionner la chose.

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
 
 
<script type="text/javascript">
				var mesImages=[]; 
				<?php
                                $j=1; $k=0;
                                while($Series[$browsedID][$j]!=NULL)
                                {
                                        echo "mesImages[".$k."] = new Image();";
                                        echo "mesImages[".$k."].src =\"".$Series[$key][$j]."\";";
                                        $k++; $j++;
                                }
                                ?>
 
 
				function setBrowsed(idimg){
    			document.getElementById('currentPic').src = mesImages[idimg].src;
				};
				</script>
 
 
				<a href="javascript:;" onclick="setBrowsed(2);">prev.</a> | <a href="javascript:;" onclick="setBrowsed(3);">next</a>
				<p>
				<img id="currentPic" />

En gros, voici la situation:

- Le code PHP fonctionne nickel : mon tableau mesImages[] est bien instancié et contient les bonnes valeurs des chemins d'accès des images.

- L'exemple que je test pour affichier mesImages[2] et mesImages[3] fonctionne bien :

http://opb-photography.com/Home3.php?page=3

Maintenant la question :

Comment rendre la chose dynamique avec une variable incrémentée/décrémentée en fonction des clics sur "précédent" et "suivant" ?

Merci d'avance pour votre aide.

Voici ma portion de code , avec le Javascript, dans le <body></body> :

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
 
<script type="text/javascript">
				var mesImages=[]; 
				<?php
                                $j=1; $k=0;
                                while($Series[$browsedID][$j]!=NULL)
                                {
                                        echo "mesImages[".$k."] = new Image();";
                                        echo "mesImages[".$k."].src =\"collection/Serie".$browsedID."/".$Series[$key][$j]."\";";
                                        $k++; $j++;
                                }
                                ?>
 
				var pointer = 0; 
				setBrowsed(0);
 
				function setBrowsed(idimg){
    			document.getElementById('currentPic').src = mesImages[idimg].src;
    			document.getElementById('num').write = donum(pointer + 1 + '/' + mesImages.length);
    			pointer = idimg;
 
    			if(pointer==0)
				{
					documentgetElementById('prev').write = "prev.";
					documentgetElementById('next').write = "<a href=\"javascript:;\" onclick=\"pointer++; setBrowsed(pointer);\">next</a>"; 
				}
				else if(pointer==mesImages.length)
				{	
					documentgetElementById('prev').write = "<a href=\"javascript:;\" onclick=\"pointer--; setBrowsed(pointer);\">prev.</a>"
					documentgetElementById('next').write = "next";
				}
				else
				{
					documentgetElementById('prev').write = "<a href=\"javascript:;\" onclick=\"pointer--; setBrowsed(pointer);\">prev.</a>";
					documentgetElementById('next').write = "<a href=\"javascript:;\" onclick=\"pointer++; setBrowsed(pointer);\">next</a>";
				}
 
 
				};
 
 
				function donum(val)
				{
					$('#num').html(val);
				}; 
 
 
				</script>
 
 
 
				<span id="prev"></span> &nbsp; | &nbsp; <span id="next"></span> &nbsp; (<span id="num"></span>)
 
				<p><br>
				<img id="currentPic" border="0" width="55%" height="55%" />

Ca ne fonctionne tjs pas...

J'ai l'impression que c'est à l'initialisation (à l'appel de la page) que ca coince. Pourquoi mon setBrowsed(0) ne réagit-il pas???!

24/07/2012, 22h45
NoSmoking

Bonsoir,

Citation:

Pourquoi mon setBrowsed(0) ne réagit-il pas???!

il te faut regarder le code HTML généré, il est souvent porteur éclaircissement.
14/08/2012, 20h13
n1n0x
J'obtiens simplement mes <span> vides;

<span id="prev"></span>   |   <span id="next"></span>   (<span id="num"></span>)

En fait je viens de comprendre pourquoi:

ne serait-ce pas mes entrées/écritures javascript qui sont foireux? Voir ci-dessous :
Code:

1 2 document.getElementById('next').write = "<a href=\"javascript:;\" onclick=\"pointer++; setBrowsed(pointer);\">next</a>";
Je suis en train de vouloir écrire dans ma <span> </span> un <a href="">/<a>.

Ca vous paraît comment, niveau html et appel js document.getElementById('next').write ?

Encore merci.
15/08/2012, 15h31
n1n0x

En aparté, mais une question tout de même assez sensible et importante: la solution javascript que vous m'avez proposé, pose un problème de "sécurité" / confidentialité des données.

Mon code javascript charge les objets de type Image (dans mesImages[]), et les chemins d'accès des photos sont donc en clair.
OK, ca reste un simple site perso etc, mais par principe, et par souci de rendre le code un peu plus "safe" de ce point de vue là, comment devrais-je procéder pour écarter ce problème ?

D'une page Home3b.php chargée, et en visualisant le code-source de ma page, on peut ensuite accéder à l'arborescence de toute ma gallerie (une quinzaine de séries photos).
Bien entendu, le point source du ftp est bloqué.

Bref, comment vous y prendriez-vous ?

Je pensais à faire des copies temporaires des fichiers de la série qui est chargée par le visiteur , dans un répertoire à la racine de mon ftp. Mais c'est un peu cochon, non ?
22/08/2012, 17h17
Bovino

Citation:

Ca vous paraît comment, niveau html et appel js document.getElementById('next').write ?

Ben, c'est tout sauf correct :aie:

write() est une méthode de l'objet document et ne peut être utilisée ni sur un élément HTML et encore moins comme une affectation.
D'autre part, cette méthode est à proscrire car elle entraine des résultats non attendus si le document est dans un état fermé : Comprendre document.write() en JavaScript
22/08/2012, 17h32
n1n0x

OK, merci !

Donc il faut que j'aille chercher du côté de fonctions d'accès DOM visiblement :

Citation:

utiliser la méthode write() implique d'introduire au niveau de l'affichage du JavaScript qui n'a rien à y faire, surtout que pour manipuler le document, de nombreuses méthodes du DOM sont disponibles et beaucoup plus fiables.

Bonjour ,

j'ai adapté mon script, comme suggéré plus haut, pour remplacer l'usage de write() par des .innerHTML , mais rien à faire, le résultat attendu n'est pas au programme !

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
 
 
<script type="text/javascript">
				var mesImages=[]; 
				<?php
                                $j=1; $k=0;
                                while($Series[$browsedID][$j]!=NULL)
                                {
                                        echo "mesImages[".$k."] = new Image();";
                                        echo "mesImages[".$k."].src =\"collection/Serie".$browsedID."/".$Series[$key][$j]."\";";
                                        $k++; $j++;
                                }
                                ?>
 
				setBrowsed(0);
 
 
        function setBrowsed(idimg){
    			document.getElementById('currentPic').setAttribute("src", mesImages[idimg].src);
    			var browsingIndexes = document.getElementById('num');
    			browsingIndexes.innerHTML = donum(pointer + 1 + '/' + mesImages.length);
 
    			var pointer = idimg;
 
    			var prev, next = null;
    			if(pointer==0)
				{
					prev = document.getElementById('prev');
					prev.innerHTML = "prev.";
					next = document.getElementById('next');
					next.innerHTML = "<a href=\"javascript:;\" onclick=\"pointer++; setBrowsed(pointer);\">next</a>"; 
				}
				else if(pointer==mesImages.length)
				{	
					prev = document.getElementById('prev');
					prev.innerHTML = "<a href=\"javascript:;\" onclick=\"pointer--; setBrowsed(pointer);\">prev.</a>"
					next = document.getElementById('next');
					next.innerHTML = "next";
				}
				else
				{
					prev = document.getElementById('prev');
					prev.innerHTML = "<a href=\"javascript:;\" onclick=\"pointer--; setBrowsed(pointer);\">prev.</a>";
					next = document.getElementById('next');
					next.innerHTML = "<a href=\"javascript:;\" onclick=\"pointer++; setBrowsed(pointer);\">next</a>";
				}
 
 
        };
 
 
	function donum(val)
	{
		$('#num').html(val);
	}; 
 
 
 
</script>

Pour rappel de ce que c'est censé donner :
- après chargement dans l'objet Image de tous les chemins d'accès des photos de la galerie affichée, on met à jour le champ "src" de la balise <img id="currentPic"></img> pour afficher la première immage (appel de setBrowsed(0)), puis on automatise le compte-vues et les liens "précédente / suivante".

http://opb-photography.com/Home3b.php?page=3

Un peu d'aide pour me sortir de mes sottises ne serait pas de refus !

27/08/2012, 13h49
NoSmoking

cette ligne est interprétée avant que l'élément ayant pour id curentPic n'appartienne au DOM, cela entraine donc une erreur.

Code:

document.getElementById('currentPic').setAttribute("src", mesImages[idimg].src);
24/09/2012, 15h52
n1n0x

Comment doit-on s'y prendre dans ce cas-la ?
Est-ce qu'il faut rajouter un parametre particulier pour faire un wait jusqu'a ce que le div possedant l'id soit connu du DOM ?

Merci.
25/09/2012, 18h58
NoSmoking
au moins 2 solutions
- mettre le script en fin de fichier avant la balise </BODY>
- mettre ta fonction sur le onload du document
Code:

1 2 3 window.onload = function(){ setBrowsed(0); };

Fuseau horaire GMT +2. Il est actuellement 09h50.