Fonction next previous + gallerie image

buroloco Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -  
buroloco Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour à tous,
je suis nouveau sur le forum, je n'ai eu le besoin de m'inscrire avant, car vos contributions sont généreuses, et je vous en remercie.
Aujourd'hui j'ai un petit problème particulier:
je souhaite faire une galerie d'image sur un site internet, avec une navigation simple prev next.
j'ai déjà fais un bout de code mais j'ai un bug.
voici le code:

head
<script>
listeimage=new Array("02.jpg","03.jpg","04.jpg","05.jpg","06.jpg","07.jpg","08.jpg");
index=-1;

function preload(){
chargeNext();
img=new Array();
for(i=1;i<listeimage.length;i++){
img[i]=new Image();
img[i].src="../image/urbain/londres/"+listeimage[i];
}
}

function chargeNext(){
if(index<(listeimage.length-1)){
index++;
document.getElementById('monimage').src="../image/urbain/londres/"+listeimage[index];
}else{
window.location="londres.html";
}
}

function chargePrev(){
if(index>0){
index-=1;
document.getElementById('monimage').src="../image/urbain/londres/"+listeimage[index];
}else{

}
}
</script>

plus loin dans le body
<div>
<a href="#" onClick="chargePrev()">PRÉCÉDENT</a> <img src="../tiret3.png"/> <a href="#" onClick="chargeNext()">SUIVANT</a>
</div>

<div>
<img src="../image/urbain/londres/01.jpg" id="monimage" />
</div>

voici mon problème:
listeimage=new Array("02.jpg","03.jpg","04.jpg","05.jpg","06.jpg","07.jpg","08.jpg");
avec cette formule quand je suis la photo 2, je ne peux pas retourner sur la première en faisant précédent.

si j'ajoute "01" à la suite, le problème est résolu mais je suis obligé de clické deux fois pour accéder à la deuxième.

est ce qu'il y a une solution pour palier à ce problème?
c'est à dire un code qui me permet de passer directement à la deuxième image en un seul click et de revenir à la première sans problème

le problème est visible sur ce site:
http://www.ludovicbollo.com/travaux/londres.html

Merci à tous,
j'espère que vous saurez m'aider.
Configuration: Mac OS X
Safari 531.9

2 réponses

  1. buroloco Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
     
    les amis j'ai trouvé la réponse:

    <script>
    listeimage=new Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg","07.jpg","08.jpg");
    index=-0;

    function preload(){
    chargeNext();
    img=new Array();
    for(i=1;i<listeimage.length;i++){
    img[i]=new Image();
    img[i].src="../image/urbain/londres/"+listeimage[i];
    }
    }

    function chargeNext(){
    if(index<(listeimage.length)){
    index++;
    document.getElementById('monimage').src="../image/urbain/londres/"+listeimage[index];
    }else{
    window.location="londres.html";
    }
    }

    function chargePrev(){
    if(index>0){
    index-=1;
    document.getElementById('monimage').src="../image/urbain/londres/"+listeimage[index];
    }else{

    }
    }
    </script>

    En haut
    index=-1; mettre 0
    plus bas
    if(index<(listeimage.length-1)){
    enlever -1
    0
  2. buroloco Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
     
    euh par contre je découvre que j'ai un autre problème, quand je faisi le tour de toutes les photos il y a un bug après la dernière photo?

    visible sur
    http://www.ludovicbollo.com/travaux/londres.html

    merci si vous trouvez une solution
    0