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 -
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.
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.
A voir également:
- Fonction next previous + gallerie image
- Fonction si et - Guide
- Image iso - Guide
- Reduire taille image - Guide
- Légende image word - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
2 réponses
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
<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
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
visible sur
http://www.ludovicbollo.com/travaux/londres.html
merci si vous trouvez une solution