Bonjour à tous.
Ca fait des heures que je m'arrache les cheveux pour tenter de déplacer ces fameux boutons "précédent et suivant"...
J'avoue ne pas avoir beaucoup de compétence en javascript (je me débrouille un peu mieux en php (quoi que là... ), mais je ne demande qu'à apprendre !
C'est un script trouvé sur internet, que j'ai, en partie, réussi à adapter à mon cas. Maintenant, j'ai besoin de créer des boutons mais qui seront placés sur le côté gauche de la photo.
Si quelqu'un pouvait me donner une piste...

Voici le code :

<script type="text/javascript">
ejs_photo = new Array;
<?php
$a = 0;
$alt = $don1['prod'];
$dossimgok = $don1['dossimg'];
$handle = opendir("images/collection/".$dossimgok."");
while (($file = readdir())!=false) {
	clearstatcache();
	if($file!=".." && $file!=".")
		{
		echo "ejs_photo[$a] = 'images/collection/".$dossimgok."/$file';
";
		$a++;
		}
	}
closedir($handle);
?>	
function ejs_aff_photos(num)
	{
	if(document.getElementById)
		{
		ejs_fin = "";
		if(num!=0)
			ejs_fin += "<A HREF=# onClick='ejs_aff_photos("+(num-1)+");return(false)'><precedent </A>";
		if(num!=(ejs_photo.length-1))
			ejs_fin += "<A HREF=# onClick='ejs_aff_photos("+(num+1)+");return(false)'> suivant></A>";
		document.getElementById("ejs_photo_box").innerHTML = "<CENTER><IMG SRC='"+ejs_photo[num]+"'WIDTH=400' 'BORDER=0' 'HEIGHT=400'>"+ejs_fin+"</CENTER>";
		}
	}
window.onload = new Function("ejs_aff_photos(0)")

</script>

Merci d'avance !

Alors : Tu fais un truc PHP à qui, quand on envoit une variable en GET, affiche une image (celle du n° de la variable dans l'array) et qui affiche celle d'avant et celle d'après...
Et après, quand tu as ça, tu réup et je te montre le pouvoir du javascript
Et vire ton javascript parce que c'est pas encore ça... vu que tu veux toujours mettre les liens, il faut les mettre dans le code HTML et seulement changer leur cible en javascript.

Cool...

@Bermanarber: pourquoi ne pas utiliser des scripts tout fait genre lightbox ?

Peut-être parce que tu lui as pas donné de lien

Citation : birdy42

@Bermanarber: pourquoi ne pas utiliser des scripts tout fait genre lightbox ?

En fait j'y est déjà jeté un coup d'oeil... mais dans le cas présent, j'ai besoin d'un truc vraiment simple : des photos qui s'affichent dans la même page, sans effet.

Et puis il me semble intéressant d'apprendre à le faire, de savoir comment ca fonctionne... non ?

Oui, c'est bien de savoir le faire !
@xavier : il connait sûrement google
Tu pourrais y faire un truc qui dans le onclick t'affiche la photo voulue dans un cadre bien précis, si c'est ce que tu veux, c'est pas bien compliqué... (tu peux même le faire au passage de la souris )

Clairement tu veux quoi exactement ?

il veut une image avec un lien suivant et un lien précédent... et il veut que sans javascript ça marche normalement avec PHP et que avec, ça cherche dans un Array javascript généré par PHP et que ça change l'image sans recharger...

En fait, j'ai un dossier "images" dans lequel sont stockées des photos, via un upload.
Je ne connais pas les noms des fichiers présents, donc j'utilise du php pour lister le contenu du dossier.

Sur ma page, je veux ensuite simplement afficher la première photo contenue dans ce dossier, et ensuite, via des liens "précédent/suivant" pouvoir afficher, à la place de cette première image, l'image suivante ou l'image précédente.
Le script que j'ai mis dans mon premier post fonctionne parfaitement, sauf que je n'arrive pas à déplacer les liens "précédent/suivant" qui sont intégrés dans une ligne javascript.

Je cherche à créer une variable "$precedent" et "$suivant" que je puisse placer où je veux...(en fait à côté de l'image) mais je n'arrive pas à modifier cette partie du code...

Il faut que tu modifies les lignes 23 à 28. C'est là que tout est "créé" via innerHTML.

Tu peux mettre tout le HTML que tu veux dans ce innerHTML

Donc tu pourrais par exemple créer deux chaînes, une pour précédent, l'autre pour suivant.

var ejs_prec = "", ejs_suiv = "";
if(num!=0){
  ejs_prec = "<a href='#' onclick='ejs_aff_photos("+(num-1)+");return(false);'><precedent </a>";
}
if(num!=(ejs_photo.length-1)){
  ejs_suiv = "<a href='#' onclick='ejs_aff_photos("+(num+1)+");return(false);'> suivant></a>";
}

Et comme ça tu peux caler ces chaînes où tu veux dans le innerHTML

Les scripts d'EJS sont toujours aussi moches -_-

EJS ?
non rien... :/

Très utile comme message hein

(j'ai laissé en blanc mais bon t'as pas du y voir )
Je demandais ce qu'était EJS... pis j'ai vu après

EJS = Editeurjavascript.com

Il vient d'où le S ?

JavaScript.. On dit bien JS non?

Ah je suis trop con...
(Il y a le droit aux mots interdits quand on parle de soi ou pas ?)

Citation : Golmote

Il faut que tu modifies les lignes 23 à 28. C'est là que tout est "créé" via innerHTML.

Tu peux mettre tout le HTML que tu veux dans ce innerHTML

Donc tu pourrais par exemple créer deux chaînes, une pour précédent, l'autre pour suivant.

var ejs_prec = "", ejs_suiv = "";
if(num!=0){
  ejs_prec = "<a href='#' onclick='ejs_aff_photos("+(num-1)+");return(false);'><precedent </a>";
}
if(num!=(ejs_photo.length-1)){
  ejs_suiv = "<a href='#' onclick='ejs_aff_photos("+(num+1)+");return(false);'> suivant></a>";
}

Et comme ça tu peux caler ces chaînes où tu veux dans le innerHTML

Merci Golmote pour l'info.
J'ai passé quelques heures à insérer ces lignes dans mon script, à essayer de l'adapter et à essayer de comprendre... sans succès !
Comme je l'ai dit, je ne connais pas grand chose au javascript...

Je comprend bien le principe de tes nouvelles variables, mais je n'arrive pas à comprendre comment les utiliser, ou les appeler ailleurs dans ma page...
Voici mon code en l'état (qui ne fonctionne pas)

<script type="text/javascript">
ejs_photo = new Array;
<?php
$a = 0;
$alt = $don1['prod'];
$dossimgok = $don1['dossimg'];
$handle = opendir("images/collection/".$dossimgok."");
while (($file = readdir())!=false) {
	clearstatcache();
	if($file!=".." && $file!=".")
		{
		echo "ejs_photo[$a] = 'images/collection/".$dossimgok."/$file'; ";
		$a++;
		}
	}
closedir($handle); ?>	
function ejs_aff_photos(num)
	{
	if(document.getElementById)
		{
var ejs_prec = "", ejs_suiv = "";
if(num!=0){
  ejs_prec = "<a href='#' onclick='ejs_aff_photos("+(num-1)+");return(false);'><precedent </a>";
}
if(num!=(ejs_photo.length-1)){
  ejs_suiv = "<a href='#' onclick='ejs_aff_photos("+(num+1)+");return(false);'> suivant></a>";
}
		}
	}
window.onload = new Function("ejs_aff_photos(0)")

</script>

Si une âme charitable pouvait m'aider...

Citation : Golmote

<a href='#' onclick='ejs_aff_photos("+(num+1)+");return(false);'> suivant></a>

<nod_>Un <a> avec return false; c'est mal, utilisez <button> qui est fait pour ça !</nod_>

Houlà malheureux, mais tu as carrément enlevé le innerHTML là non ?

Bon, regarde le code ci-dessous, j'ai commenté. Normalement tu devrais pouvoir l'adapter à ta sauce.

function ejs_aff_photos(num)
	{
	if(document.getElementById)
		{
		var ejs_prec, ejs_suiv;
		if(num!=0) {
		// On fait un chaîne avec le lien précédent
			ejs_prec = "<a href='#' onclick='ejs_aff_photos("+(num-1)+");return(false)'><precedent</a>";
		}
		if(num!=(ejs_photo.length-1)) {
		// On fait une chaîne avec le lien suivant
			ejs_suiv = "<a href='#' onclick='ejs_aff_photos("+(num+1)+");return(false)'> suivant></a>";
		}
		
		// Cette chaîne sera ensuite directement insérée dans l'élément HTML d'id "ejs_photo_box"
		var chaine_finale = "";
		
		// On peut mettre tout le HTML qu'on veut dans cette chaîne.
		
		chaine_finale += ejs_prec;
		chaine_finale += "<p style='background:red;'><img src='"+ejs_photo[num]+"' /></p>";
		chaine_finale += ejs_suiv;
		
		/* La chaîne donnera donc ce HTML (par exemple)
		  <a href='#' onclick='ejs_aff_photos(x-1);return false'><precedent</a>
		  <p style='background:red;'><img src='url_de_limage_x' /></p>
		  <a href='#' onclick='ejs_add_photos(x+1);retrun false'>suivant></a>
		*/
		
		// On l'insère maintenant dans l'élément HTML d'id "ejs_photo_box" à l'aide d'innerHTML
		document.getElementById("ejs_photo_box").innerHTML = chaine_finale;
		}
	}

Salut.
Je commence à mieux comprendre le fonctionnement... Je vais fouiller pour l'adapter à mon cas, mais déjà avec les commentaires ça répond à pas mal de mes questions !
Merci beaucoup pour le coup de main !

Salut à tous.
J'ai du faire un longue pause sur ce problème... et voila que je m'y recolle aujourd'hui...
Golmote m'avait bien "dépatouillé", avec son dernier post, mais voila que je n'ai plus tout en tête, et je n'arrive plus à avancer...

Voici la dernière version du script, mais cela ne fonctionne pas...

<script type="text/javascript">
ejs_photo = new Array;
<?php
$a = 0;
$alt = $don1['prod'];
$dossimgok = $don1['dossimg'];
$handle = opendir("images/collection/".$dossimgok."");
while (($file = readdir())!=false) {
	clearstatcache();
	if($file!=".." && $file!=".")
		{
		echo "ejs_photo[$a] = 'images/collection/".$dossimgok."/$file';
";
		$a++;
		}
	}
closedir($handle);
?>	
function ejs_aff_photos(num)
	{
	if(document.getElementById)
		{
		var ejs_prec, ejs_suiv;
		if(num!=0)
		// On fait un chaîne avec le lien précédent
			ejs_prec = "<a href='#' onclick='ejs_aff_photos("+(num-1)+");return(false)'><precedent</a>";
				if(num!=(ejs_photo.length-1))
		// On fait une chaîne avec le lien suivant
			ejs_suiv = "<a href='#' onclick='ejs_aff_photos("+(num+1)+");return(false)'>suivant></a>";
	
		
		// Cette chaîne sera ensuite directement insérée dans l'élément HTML d'id "ejs_photo_box"
		var chaine_finale = "";
		
		// On peut mettre tout le HTML qu'on veut dans cette chaîne.
		
		chaine_finale += ejs_prec;
		chaine_finale += "<p style='background:red;'><img src='"+ejs_photo[num]+"' /></p>";
		chaine_finale += ejs_suiv;
		
		// On l'insère maintenant dans l'élément HTML d'id "ejs_photo_box" à l'aide d'innerHTML
		document.getElementById("ejs_photo_box").innerHTML = chaine_finale;
		}
	}


</script>

Si quelqu'un pouvait me guider pour trouver la sortie...

Houlà bah moi non plus, je sais plus du tout de quoi ça parle Enfin si, grosso modo.

Je ne vois pas d'erreurs flagrantes dans ton code...

Ah si, en fait, y'en a une jolie je crois !

Mets des accolades à des deux conditions if() (lors de la création des liens précédent et suivant).

Toujours mettre des accolades pour éviter les erreurs bêtes...

EDIT : Arf non en fait c'est pas ça du tout.

Mais mets quand même des accolades... ça m'évitera de croire qu'il y a des erreurs quand c'est pas le cas

Salut Golmote.
Merci d'être encore sur le coup !
Je suis un peu booké en ce moment, ce qui limite mon suivi de l'affaire...
J'ai ajouté des accolades. Mais effectivement, ca ne règle pas le problème...

<script type="text/javascript">
ejs_photo = new Array;
<?php
$a = 0;
$alt = $don1['prod'];
$dossimgok = $don1['dossimg'];
$handle = opendir("images/collection/".$dossimgok."");
while (($file = readdir())!=false) {
	clearstatcache();
	if($file!=".." && $file!=".")
		{
		echo "ejs_photo[$a] = 'images/collection/".$dossimgok."/$file';
";
		$a++;
		}
	}
closedir($handle);
?>	
function ejs_aff_photos(num)
	{
	if(document.getElementById)
		{
		var ejs_prec, ejs_suiv;
		if(num!=0)
		{
		// On fait un chaîne avec le lien précédent
ejs_prec = "<a href='#' onclick='ejs_aff_photos("+(num-1)+");return(false)'><precedent</a>";
}
if(num!=(ejs_photo.length-1))
{
// On fait une chaîne avec le lien suivant
ejs_suiv = "<a href='#' onclick='ejs_aff_photos("+(num+1)+");return(false)'>suivant></a>";
}	
// Cette chaîne sera ensuite directement insérée dans l'élément HTML d'id "ejs_photo_box"
var chaine_finale = "";
		
		// On peut mettre tout le HTML qu'on veut dans cette chaîne.
		
		chaine_finale += ejs_prec;
		chaine_finale += "<p style='background:red;'><img src='"+ejs_photo[num]+"' /></p>";
		chaine_finale += ejs_suiv;
		
				// On l'insère maintenant dans l'élément HTML d'id "ejs_photo_box" à l'aide d'innerHTML
		document.getElementById("ejs_photo_box").innerHTML = chaine_finale;
		}
	}

</script>

Aucun message d'erreur, simplement aucune photo à s'afficher et pas de lien "précédent/suivant"
Une autre piste ?

Aurais-tu un lien vers la page online ?

Yes :
Lien vers la page qui ne marche pas
Lien vers la page qui marche, mais avec les liens en dessous
Alors que je souhaite insérer les liens dans le bloc image à gauche de la photo.

Lol, en fait, le problème, c'est que tu as supprimé la ligne qui lançait la fonction !

A la fin, il faut que tu mettes ceci :

window.onload=function() {
  ejs_aff_photos(0);
};

Par contre, je n'ai pas bien compris où tu souhaitais insérer les liens... ?

Arff... quel c.n !
Effectivement, ca marche.

Il reste des petits trucs à régler :
A l'affichage de la première image, j'ai "undefined" qui s'inscrit à la place de "précédent", et la même chose à la place de "suivant" à l'affichage de la dernière image.

En fait, je souhaite insérer un "<" et un ">" à gauche et à droite du mot "image" dans le bloc gris situé à gauche des images...

Alors essaie avec ce code :

<script type="text/javascript">
ejs_photo = new Array();
ejs_photo[0] = 'images/collection/1242082042/E.jpg';
ejs_photo[1] = 'images/collection/1242082042/B.jpg';
ejs_photo[2] = 'images/collection/1242082042/C.jpg';
ejs_photo[3] = 'images/collection/1242082042/D.jpg';
ejs_photo[4] = 'images/collection/1242082042/A.jpg';
	
function ejs_aff_photos(num)
	{
	if(document.getElementById)
		{
		var ejs_prec = "", ejs_suiv = "";
		if(num!=0)
		{
		// On fait un chaîne avec le lien précédent
ejs_prec = "<a href='#' onclick='ejs_aff_photos("+(num-1)+");return(false)'>&lt; </a>";
}
if(num!=(ejs_photo.length-1))
{
// On fait une chaîne avec le lien suivant
ejs_suiv = "<a href='#' onclick='ejs_aff_photos("+(num+1)+");return(false)'> &gt;</a>";
}	
// Cette chaîne sera ensuite directement insérée dans l'élément HTML d'id "ejs_photo_box"

		
		// On peut mettre tout le HTML qu'on veut dans cette chaîne.
		
		var chaine_finale = "<p style='background:red;'><img src='"+ejs_photo[num]+"' /></p>";
		var navigation = ejs_prec + "IMAGES" + ejs_suiv;
		
		/* La chaîne donnera donc ce HTML (par exemple)
		  <a href='#' onclick='ejs_aff_photos(x-1);return false'><precedent</a>
		  <p style='background:red;'><img src='url_de_limage_x' /></p>
		  <a href='#' onclick='ejs_add_photos(x+1);retrun false'>suivant></a>
		*/
		
		// On l'insère maintenant dans l'élément HTML d'id "ejs_photo_box" à l'aide d'innerHTML
		document.getElementById("ejs_photo_box").innerHTML = chaine_finale;
                document.getElementById("id_du_petit_div_gris").innerHTML = navigation;
		}
	}
window.onload=function() {
  ejs_aff_photos(0);
};
</script>

(en remplaçant bien entendu "id_du_petit_div_gris" par l'id du petit div gris... s'il n'en a pas, il faudra lui en donner un)