[Résolu] bouton précédent/suivant pour galerie d'image

catwoo

4 Août 2006 11:09:16

Salut !
J'ai fait une galerie d'image maison qui se présente comme ceci : un bandeau vertical à droite contenant les échantillons photos les uns à la suite des autres (80 pix par 80), lequel fait glisser les photos vers le haut quand on survole une image flèche haut, ou vers le bas quand on survole une image flèche bas. Au centre la photo agrandie sélectionnée parmis les échantillons cliquables (env 400 pix). Mon problème est le suivant, je voudrais rajouter en dessous de la photo agrandie des images flèches précédents et suivants, qui permettent d'afficher les photos centrales (les grandes) dans l'ordre de numérotation. Etant donné que tout ce fait dans une seule page je ne sais pas comment faire, avez-vous une idée ?

Le code que j'utilise:

<head>
<script language="javascript">

var Timer;
var Pas = 3; // vitesse défilement texte

function moveLayer(Sens)
{
if(document.getElementById)
Objet = document.getElementById("Contenu");
else
Objet = document.all["Contenu"];
if(parseInt(Objet.style.top) + (Pas*Sens) > 0)
Objet.style.top = "0px";
else
Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
Timer = setTimeout("moveLayer(" + Sens + ");", 50);
}
</script>
<style type="text/css">

</style>

</head>

<body>

<div id="Support" style="position:relative;width:100;height:315px;top:70px;overflow:hidden;border:1px solid #000000">
<div id="Contenu" style="position:absolute;width:100;height:315px;left:765px;top:0px">

<p><img src="MagnetPhoto/Galeries/Naissance/mini-01.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/01.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/1sur11.gif';" style="cursor

ointer"></p>
<p><img src="MagnetPhoto/Galeries/Naissance/mini-02.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/02.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/2sur11.gif';" style="cursor

ointer"></p>
<p><img src="MagnetPhoto/Galeries/Naissance/mini-03.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/03.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/3sur11.gif';" style="cursor

ointer"></p>
<p><img src="MagnetPhoto/Galeries/Naissance/mini-04.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/04.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/4sur11.gif';" style="cursor

ointer"></p>
<p><img src="MagnetPhoto/Galeries/Naissance/mini-05.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/05.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/5sur11.gif';" style="cursor

ointer"></p>
<p><img src="MagnetPhoto/Galeries/Naissance/mini-06.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/06.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/6sur11.gif';" style="cursor

ointer"></p>
<p><img src="MagnetPhoto/Galeries/Naissance/mini-07.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/07.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/7sur11.gif';" style="cursor

ointer"></p>
<p><img src="MagnetPhoto/Galeries/Naissance/mini-08.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/08.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/8sur11.gif';" style="cursor

ointer"></p>
<p><img src="MagnetPhoto/Galeries/Naissance/mini-09.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/09.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/9sur11.gif';" style="cursor

ointer"></p>
<p><img src="MagnetPhoto/Galeries/Naissance/mini-10.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/10.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/10sur11.gif';" style="cursor

ointer"></p>
<p><img src="MagnetPhoto/Galeries/Naissance/mini-11.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/11.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/11sur11.gif';" style="cursor

ointer"></p>
</div>
</div>

<div id="Layer1" style="position:absolute; left:792px; top:28px; width:37px; height:33px; z-index:1"><img src="MagnetPhoto/Galeries/precedent.gif" width="30" height="30" href="" onmouseover="javascript:moveLayer(1);" onmouseout="javascript:clearTimeout(Timer);" style="cursor

ointer"></div>
<div id="Layer2" style="position:absolute; left:795px; top:441px; width:41px; height:34px; z-index:2"><img src="MagnetPhoto/Galeries/suivant.gif" width="30" height="30" href="" onmouseover="javascript:moveLayer(-1);" onmouseout="javascript:clearTimeout(Timer);" style="cursor

ointer"></div>

<div id="Layer3" style="position:absolute; left:301px; top:97px; width:358px; height:305px; z-index:3"><img alt="" src="MagnetPhoto/Galeries/Naissance/01.jpg" name=vue width="400" height="300"></div>

<div id="Layer4" style="position:absolute; left:460px; top:411px; width:87px; height:29px; z-index:4"><img alt="" src="MagnetPhoto/Galeries/home.gif" name=compteur width="30" height="30"></div>
<div id="Layer5" style="position:absolute; left:407px; top:467px; width:42px; height:38px; z-index:5"><img src="MagnetPhoto/Galeries/precedent.gif" name=precedent width="30" height="30"></div>
<div id="Layer6" style="position:absolute; left:467px; top:467px; width:42px; height:40px; z-index:6"><img src="MagnetPhoto/Galeries/home.gif" width="30" height="30" style="cursor

ointer"></div>
<div id="Layer7" style="position:absolute; left:528px; top:467px; width:39px; height:40px; z-index:7"><img src="MagnetPhoto/Galeries/suivant.gif" name=suivant width="30" height="30" style="cursor

ointer"></div>
</body>
</html>

Autres pages sur : resolu bouton precedent suivant galerie image

| Etre averti des réponses
| Alerter

Répondre à catwoo

OmaR

Expert Programmation

4 Août 2006 11:19:33

il faut que tu fasses ça en javascript.

Quelques idées de raisonnement :
- avoir une variable javascript qui contient le numéro de l'image actuelle (par exemple 01)
- quand on change d'image, il faut modifier cette variable
- quand on clique sur suivant, tu incrémentes la variable, et tu modifies la source de l'image principale, en faisant un document.images['vue'].src='MagnetPhoto/Galeries/Naissance/'+ta_variable+'.jpg';
- quand on clique sur précédent, tu décrémentes la variable, et tu modifies la source de l'image principale de la même façon que pour suivant

Serais-tu capable de faire ceci ?

| Alerter

Répondre à OmaR

catwoo

4 Août 2006 11:47:48

Oui j'avais déjà envisagé cette solution, je me demandais quel sorte de fonction je dois utiliser, j'ai vu sur un site que math floor() et math ceil() pourraient convenir mais je sais pas programmer en javascript (désolée je suis un peu merdique !)

| Alerter

Répondre à catwoo

OmaR

Expert Programmation

4 Août 2006 11:56:26

là j'ai pas trop le temps de te faire quelque chose.
J'essaie de revenir ce soir et de te faire un truc.
Envoie moi un MP pour que je m'en souvienne stp.

| Alerter

Répondre à OmaR

Mdy@IDN

4 Août 2006 12:04:50

Citation :

catwoo a écrit :
Oui j'avais déjà envisagé cette solution, je me demandais quel sorte de fonction je dois utiliser, j'ai vu sur un site que math floor() et math ceil() pourraient convenir mais je sais pas programmer en javascript (désolée je suis un peu merdique !)

Bonjour,

Tu oublie Math.ceil() et dans la routine moveLayer(sens) tu met la valeur du numéro de l'image dans la variable définie en début, à savoir: WK_no (par exemple). Ce numéro d'image, tu l'as d'abord calculé évidemment soit en plus soit en moins.
N'oublie pas que si tu arrive à la limite inférieur (le compteur d'image est < à 0) tu dois mettre la valeur maximum (nombre d'images). Inversément: si tu as atteint la valeur maximum (le compteur d'image est > que le maximum) tu dois mettre 0 (la valeur minimum).

| Alerter

Répondre à Mdy@IDN

catwoo

4 Août 2006 12:23:50

woooaahhh...
je reposterai ce soir je pense ...;)

merci quand même

| Alerter

Répondre à catwoo

OmaR

Expert Programmation

4 Août 2006 17:14:54

Salut,

Je suis de retour.

Alors, je t'ai fait quelque chose ! :-)

Remplace ton code javascript par celui-ci :

<script language="javascript">

 
var Timer;

var Pas = 3; // vitesse défilement texte

var Img = 1; // le numéro de l'image à afficher

var End = 11; // le numéro de la dernière image

 
function moveLayer(Sens)

{

if(document.getElementById)

	Objet = document.getElementById("Contenu");

else

	Objet = document.all["Contenu"];

if(parseInt(Objet.style.top) + (Pas*Sens) > 0)

	Objet.style.top = "0px";

else

	Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";

Timer = setTimeout("moveLayer(" + Sens + ");", 50);

}

 
function nextImage() {

	Img = Img + 1 ;

	if (Img >= End) 

		Img = 1; // si on dépasse la dernière image, on revient au début

	if (Img >= 1 && Img <= 9)

		document.images['vue'].src='MagnetPhoto/Galeries/Naissance/0'+Img+'.jpg'; // si c'est <= 9 on met un 0 devant

	else 

		document.images['vue'].src='MagnetPhoto/Galeries/Naissance/'+Img+'.jpg'; // sinon on affiche le numéro

}

 
function previousImage() {

	Img = Img - 1;

	if (Img <= 1)

		Img = End; // si on dépasse la première image (en reculant), on passe à la dernière

	if (Img >= 1 && Img <= 9)

		document.images['vue'].src='MagnetPhoto/Galeries/Naissance/0'+Img+'.jpg'; // si c'est <= 9 on met un 0 devant

	else 

		document.images['vue'].src='MagnetPhoto/Galeries/Naissance/'+Img+'.jpg'; // sinon on affiche le numéro

}

</script>

Ensuite, tu as juste besoin de mettre onclick="javascript

reviousImage();" quand tu veux reculer d'une image (sans l'espace entre java et script !)
Et de mettre onclick="javascript:nextImage();" quand tu veux avancer d'une image (sans l'espace aussi)

Quand on arrive à la dernière image, ça repasse au début, et quand on arrive à la première, ça repasse à la dernière.

Je l'ai testé, ça doit marcher normalement

| Alerter

Répondre à OmaR

catwoo

4 Août 2006 18:16:03

Waouuh Super Fort Omar_sharif ! T'es le meilleur, merci beaucoup :gg: !!

Bizz @toute l'équipe

| Alerter

Répondre à catwoo

OmaR

Expert Programmation

4 Août 2006 22:14:13

Citation :

Waouuh Super Fort Omar_sharif ! T'es le meilleur, merci beaucoup !!

Bizz @toute l'équipe

De rien

Tu veux m'épouser ?[/size]

| Alerter

Répondre à OmaR

Mdy@IDN

4 Août 2006 23:20:54

En fait les fonctions "function previousImage() " et "function nextImage() " sont les mêmes, à la différence qu'IMG est +1 dans l'une et -1 dans l'autre. Donc on peut faire appel à la même routine et comme argument (entre parenthèses) on met soit(1) pour le suivant, ou (-1) pour le précédent. Evidemment dans la nouvelle fonction, IMG=IMG+arg (argument transmis)

| Alerter

Répondre à Mdy@IDN

catwoo

5 Août 2006 07:34:10

Merci pour les explixations... Au fait il y a un micro bug j'ai vu hier soir, la photo n°1 est zappée quand on se sert que de ces 2 boutons, par exemple en cliquant que sur suivant on voit apparaitre : 02-clic-03-clic-04-clic-05-clic-06-clic-07-clic-08-clic-09-clic-10-clic-11-clic-02-clic-03.....
Voyez la 01 n'apparait jamais, c'est qu'un p'tit bug parce qu'heureusement y a le bandeau défilant à droite, donc on peut la voir comme ça, en plus par défaut c'est la première qui se voit qand on arrive dans la galerie, donc c'est pas très grave...

Qui sait Omar, si tu trouve une solution à ça, je t'épouserai p'têtre ;-)

Au fait, vous avez remarqué que les boutons sont discociés du bandeau, je veut dire si on affiche la n°05, puis qu'on clique sur précédent on obtient la n°02 (la fonction est discociée) au lieu de la 06.

J'vous demande pas de régler ça, c'est pas très grave, le bug de la photo 01 est plus chiant je pense :-?

| Alerter

Répondre à catwoo

OmaR

Expert Programmation

5 Août 2006 08:33:34

Salut,

En effet, il me manquait quelques trucs...
Pour la remarque de mdy, je l'ai remarqué quand j'ai fait ma fonction, mais j'ai laissé comme ça, qui est plus explicite je pense.

Sinon, pour la numéro 01, je ne comprend pas... quand je l'ai fait j'avais mis des images de 01 à 11 (comme ce que tu as), et j'ai bien eu toutes les images de 01 à 11.

Ensuite, pour les boutons dissociés, je te fais ça d'ici quelques minutes...

Edit : j'ai pas encore eu le temps de finir, mais là faut que j'aille au boulot, je te finis ça vers 18h-19h

| Alerter

Répondre à OmaR

catwoo

5 Août 2006 08:46:23

No problemo

Je viens de capter un truc si ça peut t'aider, en fait l'image 01 est zappée uniquement quand tu te déplace en marche arrière, c'est à dire que t'appuie que sur le bouton précédent, si tu utilise que le suivant, la 01 apparait à sa place normale, entre 11 et 02...

@ce soir donc ;-)

| Alerter

Répondre à catwoo

crazycat@idn

Expert Programmation

5 Août 2006 09:20:58

J'ai jeté un oeil très rapide...

function previousImage() {

    Img = Img - 1;

    if (Img <= 1)

...

J'aurais mis strictement inférieur à 1

| Alerter

Répondre à crazycat@idn

catwoo

5 Août 2006 10:06:19

Bien joué l'ami des chats ! Ca a marché, en fait il y avait le même bug avec la fonction nextimage(), qui zappait la photo 11 (dernière) je viens de m'en appercevoir, avec ta technique j'ai viré le signe égal et ça marché aussi...

Merci Merci ! :hug:

| Alerter

Répondre à catwoo

OmaR

Expert Programmation

5 Août 2006 13:13:40

Me voilà de retour !

Alors, selon la remarque de mdy, j'ai fait une seule fonction.

Remplace les fonctions nextImage et previousImage par ces fonctions :

function changeImage(value) { // si on avance value = 1, si on recule value = -1

	Img = Img + value ;

	if (value == 1) {

		if (Img > End) 

			Img = 1; // si on dépasse la dernière image, on revient au début

	}

	else {

		if (Img < 1)

			Img = End; // si on dépasse la première image (en reculant), on passe à la dernière

	}

	if (Img >= 1 && Img <= 9)

		document.images['vue'].src='Test/0'+Img+'.jpg'; // si c'est <= 9 on met un 0 devant

	else 

		document.images['vue'].src='Test/'+Img+'.jpg'; // sinon on affiche le numéro

}

 
function imageClicked(id) {

	Img = id;

	if (Img >= 1 && Img <= 9)

		document.images['vue'].src='Test/0'+Img+'.jpg';

	else

		document.images['vue'].src='Test/'+Img+'.jpg';

	document.images['compteur'].src='MagnetPhoto/Galeries/'+Img+'sur'+End+'.gif';

}

Ensuite, remplace tes lignes :
<img src="MagnetPhoto/Galeries/Naissance/mini-01.jpg" width="80" height="60" onclick="document.images['vue'].src='MagnetPhoto/Galeries/Naissance/01.jpg'; document.images['compteur'].src='MagnetPhoto/Galeries/1sur11.gif';" style="cursor

ointer">
Par ceci :

<img src="MagnetPhoto/Galeries/Naissance/mini-01.jpg" width="80" height="60" onclick="imageClicked(1);" style="cursor

ointer"> (en mettant bien imageClicked(le numéro de l'image sans le 0 devant) dans l'évènement onclick.

Ensuite, remplace le javascript

reviousImage(); par javascript:changeImage(-1); et remplace javascript:nextImage(); par javascript:changeImage(1);

Et ça devrait être bon (je pense t'avoir tout donné).

Je reviens vers 18h30 au cas où.

| Alerter

Répondre à OmaR

Mdy@IDN

5 Août 2006 13:57:56

Si on remplace le test Img < 1 par Img<0, on obtiendra l'image 1 qu'on aille en avant ou en arrière.

EDIT: Je retire ce que je viens de poster.
Cette remarque est bonne si le numéro de l'image commence à zéro (0).

Mais je vois ce qui pourrait empêcher l'affichage de la photo 01:
Au premier if (dans la function changeImage) il y a if (IMG==1)... . A remplacer par: if (Img>end)

Le deuxième if (if Img > end) est inutile pour moi.

| Alerter

Répondre à Mdy@IDN

catwoo

5 Août 2006 14:49:00

Merci mdy pour tes conseils, le code de Omar a bien marché (enfin une fois que j'ai vu que le répertoire où il avait mis ses images de test n'avait pas le même nom que le mien, d'où blocage au début...). C'est super je suis contente, aussi je vous ai fait une p'tite surprise pour vous remercier :-D

C'est par ici :

http://img222.imageshack.us/img222/5409/chocomarwi2.jpg

| Alerter

Répondre à catwoo

Mdy@IDN

5 Août 2006 15:11:03

Miam, miam.

A ton service.

edit: C'est du chocolat belge ?

| Alerter

Répondre à Mdy@IDN

catwoo

5 Août 2006 15:17:34

Non je crois pas, c'est des chocolats RICHART fourrés aux fruits exotiques, aux épices et au caramel salé, c'est les meilleurs chocolats que je connaisse :-P

Parceque vous le valez bien !

| Alerter

Répondre à catwoo

Mdy@IDN

5 Août 2006 15:25:12

Citation :

Parceque vous le valez bien !

C'est le slogan d'une autre marque çà ? non ?

| Alerter

Répondre à Mdy@IDN

okinou

Expert Programmation

5 Août 2006 15:32:47

l'oréal beurk

| Alerter

Répondre à okinou

OmaR

Expert Programmation

5 Août 2006 16:12:02

Citation :

catwoo a écrit :
Merci mdy pour tes conseils, le code de Omar a bien marché (enfin une fois que j'ai vu que le répertoire où il avait mis ses images de test n'avait pas le même nom que le mien, d'où blocage au début...).

Ah oui désolé ! J'avais oublié de rechangé pour que ton truc marche, parce que moi j'avais juste créé un dossier "Test/" et pas fait ton arborescence :-P

Citation :

C'est super je suis contente, aussi je vous ai fait une p'tite surprise pour vous remercier :-D

C'est par ici :

http://img222.imageshack.us/img222/5409/chocomarwi2.jpg

Oh c'est gentil !

et mon mariage alors ?!if (value == 1) {
if (Img > End)
Img = 1; // si on dépasse la dernière image, on revient au début
}
else {
if (Img < 1)
Img = End; // si on dépasse la première image (en reculant), on passe à la dernière
}[/code]

Par

if (Img > End) 

            Img = 1; // si on dépasse la dernière image, on revient au début

        if (Img < 1)

            Img = End; // si on dépasse la première image (en reculant), on passe à la dernière

Si j'ai bien compris ce que tu m'as dit, il semblerait que ouais tu ai raison, mais vu que j'étais pressé, j'ai pas réfléchis longtemps.

| Alerter

Répondre à OmaR

catwoo

5 Août 2006 16:35:27

ha oui le mariage j'avais oublié !

Ce sera pour une prochaine, je reviendrais c'est promis :-)

PS: Merci Okinou pour ta remarque pertinente et qui enrichit sans nulle doute ce post...

| Alerter

Répondre à catwoo

Mdy@IDN

5 Août 2006 16:45:49

Yes, of course, because: on doit économiser le temps d'exécution (en nanosecondes multipliés par beaucoup=un gain parfois appréciable).

| Alerter

Répondre à Mdy@IDN

Mdy@IDN

5 Août 2006 20:21:20

En plus on pourrait l'écrire (et c'est aussi lisible)

if (Img > End) Img = 1; // si on dépasse la dernière image (en avancant) = début
if (Img < 1) Img = End; // si on dépasse la première image (en reculant) = dernière

| Alerter

Répondre à Mdy@IDN

OmaR

Expert Programmation

5 Août 2006 22:13:44

Citation :

mdy a écrit :
En plus on pourrait l'écrire (et c'est aussi lisible)

if (Img > End) Img = 1; // si on dépasse la dernière image (en avancant) = début
if (Img < 1) Img = End; // si on dépasse la première image (en reculant) = dernière

Pour tout te dire, j'avais fait ça comme ça au début, sur une seule ligne, mais déjà qu'elle est pas super calée en javascript, je n'ai pas osé tout mettre sur une ligne pour les conditions, et espacer.
Ca permet de mieux comprendre je crois.
Autant faire quelque chose qu'elle comprenne un minimum.

Bref, voilà, tu as ta petite galerie.
Bonne chance pour la suite.

Pour le mariage, tant pis, je verrai ça avec ma copine dans quelques années (si je suis encore avec :-P)

| Alerter

Répondre à OmaR

Mdy@IDN

5 Août 2006 23:02:39

Omar, pour ta signature: tu pourrais mettre: Je pince mais ne mord pas...

| Alerter

Répondre à Mdy@IDN

Tom's guide dans le monde