El caso es que estoy creando una galería de imágenes.
Por un lado tengo 25 miniaturas, y cada una llama a una función para cambiar la imagen de fondo de un section con id="derecha". Esta función es:
Código :
function FondoGaleria(img){
var fondo=document.getElementById("derecha");
fondo.style.backgroundImage="url("+img+")";
}Hasta aquí perfecto.
Ahora bien, por otro lado tengo unas flechas de anterior y siguiente, a las que asocio estas funciones:
Código :
function siguiente(seccion){
var actual=document.getElementById('derecha').style.backgroundImage;
var i=1;
for (i=1;i<26;i++){
var urlfondo='url("Imagenes/'+seccion+'/imagen-'+i+'.jpg")';
if(actual==urlfondo){
if(i<25){
var nueva=i+1;
FondoGaleria("Imagenes/"+seccion+"/imagen-"+nueva+".jpg");
break;
}
else{
FondoGaleria("Imagenes/"+seccion+"/imagen-1.jpg");
break;
}
}
else{
continue;
}
}
}
function anterior(seccion){
var actual=document.getElementById('derecha').style.backgroundImage;
var i=1;
for (i=1;i<26;i++){
var urlfondo='url("Imagenes/'+seccion+'/imagen-'+i+'.jpg")';
if(actual==urlfondo){
if(i>1){
var nueva=i-1;
FondoGaleria("Imagenes/"+seccion+"/imagen-"+nueva+".jpg");
break;
}
else{
FondoGaleria("Imagenes/"+seccion+"/imagen-25.jpg");
break;
}
}
else{
continue;
}
}
}
Pues al arrancar la página, en mi section id="derecha" tengo una primera imagen de fondo. Las flechas no funcionan para hacer el cambio.
Si pincho en las miniaturas, cambia la imagen. Ahora voy a las flechas y funcionan. Si actualizo la página dejan de funcionar.
Una ayudita, por favor?
