Visionneuse d'image depuis données dynamiques

**n1n0x** · 09/06/2012, 17h37

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.

Invité · 09/06/2012, 17h44

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

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?

**n1n0x** · 09/06/2012, 17h51

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.

Invité · 09/06/2012, 19h03

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

**n1n0x** · 11/06/2012, 09h52

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.

Invité · 11/06/2012, 09h59

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

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

)

**n1n0x** · 24/07/2012, 00h19

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 :

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

**n1n0x** · 24/07/2012, 03h47

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

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

**NoSmoking** · 24/07/2012, 22h45

Bonsoir,

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

il te faut regarder le code HTML généré, il est souvent porteur éclaircissement.

**n1n0x** · 14/08/2012, 20h13

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 :

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

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.

**n1n0x** · 15/08/2012, 15h31

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 ?

**Bovino** · 22/08/2012, 17h17

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

Ben, c'est tout sauf correct

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

**n1n0x** · 22/08/2012, 17h32

OK, merci !

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

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.

**n1n0x** · 23/08/2012, 16h50

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 :

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

**NoSmoking** · 27/08/2012, 13h49

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 :

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

document.getElementById('currentPic').setAttribute("src", mesImages[idimg].src);

**n1n0x** · 24/09/2012, 15h52

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.

**NoSmoking** · 25/09/2012, 18h58

au moins 2 solutions
- mettre le script en fin de fichier avant la balise </BODY>
- mettre ta fonction sur le onload du document

Code :

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

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

Visionneuse d'image depuis données dynamiques

JavaScript

Discussions similaires

Partager

Partager