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

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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></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="cursorointer"></div>
</body>
</html>

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

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 ?

Répondre à OmaR

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

Répondre à catwoo

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.

Répondre à OmaR

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

Répondre à Mdy@IDN

woooaahhh...
je reposterai ce soir je pense ...

merci quand même

Répondre à catwoo

Salut,

Je suis de retour.

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

Remplace ton code javascript par celui-ci :

Code :

<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="javascriptreviousImage();" 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

Répondre à OmaR

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

Bizz @toute l'équipe

Répondre à catwoo

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]

Répondre à OmaR

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)

Répondre à Mdy@IDN

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

Répondre à catwoo

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

Répondre à OmaR

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

Répondre à catwoo

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

Code :

function previousImage() {
Img = Img - 1;
if (Img <= 1)
...

J'aurais mis strictement inférieur à 1

Répondre à crazycat@idn

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:

Répondre à catwoo

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 :

Code :

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="cursorointer">
Par ceci :

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

Ensuite, remplace le javascriptreviousImage(); 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ù.

Répondre à OmaR

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.

Répondre à Mdy@IDN

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 [...] marwi2.jpg

Répondre à catwoo

Miam, miam.

A ton service.

edit: C'est du chocolat belge ?

Répondre à Mdy@IDN

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 !

Répondre à catwoo

Citation :

Parceque vous le valez bien !

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

Répondre à Mdy@IDN

l'oréal beurk

Répondre à okinou

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 [...] marwi2.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

Code :

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.

Répondre à OmaR

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

Répondre à catwoo

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

Répondre à Mdy@IDN

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

Répondre à Mdy@IDN

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)

Répondre à OmaR

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

Répondre à Mdy@IDN

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

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

Attention