Votre question

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

Tags :
  • Javascript
  • Programmation
Dernière réponse : dans Programmation
4 Août 2006 13: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">
<!--
body {
background-color: #000000;
}
-->
</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:p 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:p 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:p 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:p 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:p 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:p 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:p 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:p 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:p 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:p 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:p 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:p 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:p 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:p 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:p ointer"></div>
</body>
</html>

Autres pages sur : resolu bouton precedent suivant galerie image

a c 232 L Programmation
4 Août 2006 13: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 ?
4 Août 2006 13: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 !)


Contenus similaires
a c 232 L Programmation
4 Août 2006 13: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.
4 Août 2006 14: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).
4 Août 2006 14:23:50

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

merci quand même
a c 232 L Programmation
4 Août 2006 19:14:54

Salut,

Je suis de retour.

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

Remplace ton code javascript par celui-ci :
  1. <script language="javascript">
  2.  
  3. var Timer;
  4. var Pas = 3; // vitesse défilement texte
  5. var Img = 1; // le numéro de l'image à afficher
  6. var End = 11; // le numéro de la dernière image
  7.  
  8. function moveLayer(Sens)
  9. {
  10. if(document.getElementById)
  11. Objet = document.getElementById("Contenu");
  12. else
  13. Objet = document.all["Contenu"];
  14. if(parseInt(Objet.style.top) + (Pas*Sens) > 0)
  15. Objet.style.top = "0px";
  16. else
  17. Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
  18. Timer = setTimeout("moveLayer(" + Sens + ");", 50);
  19. }
  20.  
  21. function nextImage() {
  22. Img = Img + 1 ;
  23. if (Img >= End)
  24. Img = 1; // si on dépasse la dernière image, on revient au début
  25. if (Img >= 1 && Img <= 9)
  26. document.images['vue'].src='MagnetPhoto/Galeries/Naissance/0'+Img+'.jpg'; // si c'est <= 9 on met un 0 devant
  27. else
  28. document.images['vue'].src='MagnetPhoto/Galeries/Naissance/'+Img+'.jpg'; // sinon on affiche le numéro
  29. }
  30.  
  31. function previousImage() {
  32. Img = Img - 1;
  33. if (Img <= 1)
  34. Img = End; // si on dépasse la première image (en reculant), on passe à la dernière
  35. if (Img >= 1 && Img <= 9)
  36. document.images['vue'].src='MagnetPhoto/Galeries/Naissance/0'+Img+'.jpg'; // si c'est <= 9 on met un 0 devant
  37. else
  38. document.images['vue'].src='MagnetPhoto/Galeries/Naissance/'+Img+'.jpg'; // sinon on affiche le numéro
  39. }
  40. </script>


Ensuite, tu as juste besoin de mettre onclick="javascript:p 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
4 Août 2006 20:16:03

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

Bizz @toute l'équipe ;) 
a c 232 L Programmation
5 Août 2006 00:14:13

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

Bizz @toute l'équipe ;) 


:jap:  De rien :jap: 


Tu veux m'épouser ?[/size]
5 Août 2006 01: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)
5 Août 2006 09: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 :-?
a c 232 L Programmation
5 Août 2006 10: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
5 Août 2006 10: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 ;-)
a c 145 L Programmation
5 Août 2006 11:20:58

J'ai jeté un oeil très rapide...
  1. function previousImage() {
  2. Img = Img - 1;
  3. if (Img <= 1)
  4. ...

J'aurais mis strictement inférieur à 1 :) 
5 Août 2006 12: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:
a c 232 L Programmation
5 Août 2006 15: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 :

  1. function changeImage(value) { // si on avance value = 1, si on recule value = -1
  2. Img = Img + value ;
  3. if (value == 1) {
  4. if (Img > End)
  5. Img = 1; // si on dépasse la dernière image, on revient au début
  6. }
  7. else {
  8. if (Img < 1)
  9. Img = End; // si on dépasse la première image (en reculant), on passe à la dernière
  10. }
  11. if (Img >= 1 && Img <= 9)
  12. document.images['vue'].src='Test/0'+Img+'.jpg'; // si c'est <= 9 on met un 0 devant
  13. else
  14. document.images['vue'].src='Test/'+Img+'.jpg'; // sinon on affiche le numéro
  15. }
  16.  
  17. function imageClicked(id) {
  18. Img = id;
  19. if (Img >= 1 && Img <= 9)
  20. document.images['vue'].src='Test/0'+Img+'.jpg';
  21. else
  22. document.images['vue'].src='Test/'+Img+'.jpg';
  23. document.images['compteur'].src='MagnetPhoto/Galeries/'+Img+'sur'+End+'.gif';
  24. }


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:p ointer">
Par ceci :

<img src="MagnetPhoto/Galeries/Naissance/mini-01.jpg" width="80" height="60" onclick="imageClicked(1);" style="cursor:p ointer">
(en mettant bien imageClicked(le numéro de l'image sans le 0 devant) dans l'évènement onclick.

Ensuite, remplace le javascript:p 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ù.
5 Août 2006 15: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.
5 Août 2006 16: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


5 Août 2006 17:11:03

Miam, miam.

A ton service.

edit: C'est du chocolat belge ?
5 Août 2006 17: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 !
5 Août 2006 17:25:12

Citation :

Parceque vous le valez bien !


C'est le slogan d'une autre marque çà ? non ?
5 Août 2006 17:32:47

l'oréal beurk
a c 232 L Programmation
5 Août 2006 18: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
  1. if (Img > End)
  2. Img = 1; // si on dépasse la dernière image, on revient au début
  3. if (Img < 1)
  4. 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.
5 Août 2006 18: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...
5 Août 2006 18: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).
5 Août 2006 22: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
a c 232 L Programmation
6 Août 2006 00: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)
6 Août 2006 01:02:39

Omar, pour ta signature: tu pourrais mettre: Je pince mais ne mord pas...
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS