Bueno al tema que es lo que interesa
Estoy intentando hacer una galeria de fotos mediante javascript.. lo que pretendo es que de las 65 fotos que tengo se vayan mostrando de 9 en 9 de forma que mediante un par de botones, anterior y siguiente, se vayan intercambiando con las demás fotos para poder navegar entre ellas. Hasta ahí todo correcto. El problema viene cuando intento introducir una pequeña animación cuando pinchamos sobre una foto. Dicha animación lo que nos hace es sombrear la pantalla y colocar la foto que hemos pinchado centrada en pantalla y con un tamaño de 800x600
Si alguien tiene curiosidad por ella es la que aparece en este enlace terrenoweb.com/javascript_imagenes.php, de hecho el código lo obtube de aquí
Pues bien al principio todo funciona correctamente, las fotos se agrandan, y se muestran correctamente, sin embargo cuando pulsamos siguiente y aparece la nueva tanda de 9 fotos, la animación ya no funciona y se comporta como si se tratara de un simple enlace.
El problema creo que viene desde el obj.innerHTML que utilizo para actualizar el grupo de fotos, al cual ya no le afecta los scripts de la cabecera.
Mi pregunta es si hay alguna forma de "reiniciar" estos scripts sin tener que refrescar el html ya que si no se me va al traste el script q he hecho yo para la navegación entre las fotos
Coloco aquí el código por si alguien lo necesita para entenderme:
Cita:
<script type="text/javascript">
<!--
var caso = 0;
var foto1 = "img_1.jpg";
var foto2 = "img_2.jpg";
var foto3 = "img_3.jpg";
var foto4 = "img_4.jpg";
var foto5 = "img_5.jpg";
var foto6 = "img_6.jpg";
var foto7 = "img_7.jpg";
var foto8 = "img_8.jpg";
var foto9 = "img_9.jpg";
var pos_foto1 = "fotoGaleriaH";
var pos_foto2 = "fotoGaleriaH";
var pos_foto3 = "fotoGaleriaV";
var pos_foto4 = "fotoGaleriaH";
var pos_foto5 = "fotoGaleriaH";
var pos_foto6 = "fotoGaleriaH";
var pos_foto7 = "fotoGaleriaH";
var pos_foto8 = "fotoGaleriaH";
var pos_foto9 = "fotoGaleriaV";
function cambiaFotos(boton)
{
if(boton == 0 && caso < 7)
{
caso = caso+1;
}else if(boton == 1 && caso > 0){
caso = caso-1;
}
switch (caso){
case 0:
foto1 = "img_1.jpg";
foto2 = "img_2.jpg";
foto3 = "img_3.jpg";
foto4 = "img_4.jpg";
foto5 = "img_5.jpg";
foto6 = "img_6.jpg";
foto7 = "img_7.jpg";
foto8 = "img_8.jpg";
foto9 = "img_9.jpg";
pos_foto1 = "fotoGaleriaH";
pos_foto2 = "fotoGaleriaH";
pos_foto3 = "fotoGaleriaV";
pos_foto4 = "fotoGaleriaH";
pos_foto5 = "fotoGaleriaH";
pos_foto6 = "fotoGaleriaH";
pos_foto7 = "fotoGaleriaH";
pos_foto8 = "fotoGaleriaH";
pos_foto9 = "fotoGaleriaV";
break;
case 1:
//varios case parecidos al anterior
}
var obj = document.getElementById("bloqueFoto");
var new_bloque = "";
if(foto1 != 0)
{
new_bloque = "<a href='g_fotos/"+foto1+"' rel='lightbox[roadtrip]'><img class='"+pos_foto1+"' src='p_fotos/"+foto1+"' alt='foto'/></a>";
}
if(foto2 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto2+"' rel='lightbox[roadtrip]'><img class='"+pos_foto2+"' src='p_fotos/"+foto2+"' alt='foto'/></a>";
}
if(foto3 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto3+"' rel='lightbox[roadtrip]'><img class='"+pos_foto3+"' src='p_fotos/"+foto3+"' alt='foto'/></a>";
}
if(foto4 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto4+"' rel='lightbox[roadtrip]'><img class='"+pos_foto4+"' src='p_fotos/"+foto4+"' alt='foto'/></a>";
}
if(foto5 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto5+"' rel='lightbox[roadtrip]'><img class='"+pos_foto5+"' src='p_fotos/"+foto5+"' alt='foto'/></a>";
}
if(foto6 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto6+"' rel='lightbox[roadtrip]'><img class='"+pos_foto6+"' src='p_fotos/"+foto6+"' alt='foto'/></a>";
}
if(foto7 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto7+"' rel='lightbox[roadtrip]'><img class='"+pos_foto7+"' src='p_fotos/"+foto7+"' alt='foto'/></a>";
}
if(foto8 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto8+"' rel='lightbox[roadtrip]'><img class='"+pos_foto8+"' src='p_fotos/"+foto8+"' alt='foto'/></a>";
}
if(foto9 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto9+"' rel='lightbox[roadtrip]'><img class='"+pos_foto9+"' src='p_fotos/"+foto9+"' alt='foto'/></a>";
}
obj.innerHTML = new_bloque;
}
document.write("<div id='bloqueFoto'>")
document.write("<a href='g_fotos/"+foto1+"' rel='lightbox[roadtrip]'><img class='"+pos_foto1+"' src='p_fotos/"+foto1+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto2+"' rel='lightbox[roadtrip]'><img class='"+pos_foto2+"' src='p_fotos/"+foto2+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto3+"' rel='lightbox[roadtrip]'><img class='"+pos_foto3+"' src='p_fotos/"+foto3+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto4+"' rel='lightbox[roadtrip]'><img class='"+pos_foto4+"' src='p_fotos/"+foto4+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto5+"' rel='lightbox[roadtrip]'><img class='"+pos_foto5+"' src='p_fotos/"+foto5+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto6+"' rel='lightbox[roadtrip]'><img class='"+pos_foto6+"' src='p_fotos/"+foto6+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto7+"' rel='lightbox[roadtrip]'><img class='"+pos_foto7+"' src='p_fotos/"+foto7+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto8+"' rel='lightbox[roadtrip]'><img class='"+pos_foto8+"' src='p_fotos/"+foto8+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto9+"' rel='lightbox[roadtrip]'><img class='"+pos_foto9+"' src='p_fotos/"+foto9+"' alt='foto'/></a>")
document.write("</div>")
-->
</script>
<!--
var caso = 0;
var foto1 = "img_1.jpg";
var foto2 = "img_2.jpg";
var foto3 = "img_3.jpg";
var foto4 = "img_4.jpg";
var foto5 = "img_5.jpg";
var foto6 = "img_6.jpg";
var foto7 = "img_7.jpg";
var foto8 = "img_8.jpg";
var foto9 = "img_9.jpg";
var pos_foto1 = "fotoGaleriaH";
var pos_foto2 = "fotoGaleriaH";
var pos_foto3 = "fotoGaleriaV";
var pos_foto4 = "fotoGaleriaH";
var pos_foto5 = "fotoGaleriaH";
var pos_foto6 = "fotoGaleriaH";
var pos_foto7 = "fotoGaleriaH";
var pos_foto8 = "fotoGaleriaH";
var pos_foto9 = "fotoGaleriaV";
function cambiaFotos(boton)
{
if(boton == 0 && caso < 7)
{
caso = caso+1;
}else if(boton == 1 && caso > 0){
caso = caso-1;
}
switch (caso){
case 0:
foto1 = "img_1.jpg";
foto2 = "img_2.jpg";
foto3 = "img_3.jpg";
foto4 = "img_4.jpg";
foto5 = "img_5.jpg";
foto6 = "img_6.jpg";
foto7 = "img_7.jpg";
foto8 = "img_8.jpg";
foto9 = "img_9.jpg";
pos_foto1 = "fotoGaleriaH";
pos_foto2 = "fotoGaleriaH";
pos_foto3 = "fotoGaleriaV";
pos_foto4 = "fotoGaleriaH";
pos_foto5 = "fotoGaleriaH";
pos_foto6 = "fotoGaleriaH";
pos_foto7 = "fotoGaleriaH";
pos_foto8 = "fotoGaleriaH";
pos_foto9 = "fotoGaleriaV";
break;
case 1:
//varios case parecidos al anterior
}
var obj = document.getElementById("bloqueFoto");
var new_bloque = "";
if(foto1 != 0)
{
new_bloque = "<a href='g_fotos/"+foto1+"' rel='lightbox[roadtrip]'><img class='"+pos_foto1+"' src='p_fotos/"+foto1+"' alt='foto'/></a>";
}
if(foto2 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto2+"' rel='lightbox[roadtrip]'><img class='"+pos_foto2+"' src='p_fotos/"+foto2+"' alt='foto'/></a>";
}
if(foto3 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto3+"' rel='lightbox[roadtrip]'><img class='"+pos_foto3+"' src='p_fotos/"+foto3+"' alt='foto'/></a>";
}
if(foto4 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto4+"' rel='lightbox[roadtrip]'><img class='"+pos_foto4+"' src='p_fotos/"+foto4+"' alt='foto'/></a>";
}
if(foto5 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto5+"' rel='lightbox[roadtrip]'><img class='"+pos_foto5+"' src='p_fotos/"+foto5+"' alt='foto'/></a>";
}
if(foto6 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto6+"' rel='lightbox[roadtrip]'><img class='"+pos_foto6+"' src='p_fotos/"+foto6+"' alt='foto'/></a>";
}
if(foto7 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto7+"' rel='lightbox[roadtrip]'><img class='"+pos_foto7+"' src='p_fotos/"+foto7+"' alt='foto'/></a>";
}
if(foto8 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto8+"' rel='lightbox[roadtrip]'><img class='"+pos_foto8+"' src='p_fotos/"+foto8+"' alt='foto'/></a>";
}
if(foto9 != 0)
{
new_bloque = new_bloque+"<a href='g_fotos/"+foto9+"' rel='lightbox[roadtrip]'><img class='"+pos_foto9+"' src='p_fotos/"+foto9+"' alt='foto'/></a>";
}
obj.innerHTML = new_bloque;
}
document.write("<div id='bloqueFoto'>")
document.write("<a href='g_fotos/"+foto1+"' rel='lightbox[roadtrip]'><img class='"+pos_foto1+"' src='p_fotos/"+foto1+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto2+"' rel='lightbox[roadtrip]'><img class='"+pos_foto2+"' src='p_fotos/"+foto2+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto3+"' rel='lightbox[roadtrip]'><img class='"+pos_foto3+"' src='p_fotos/"+foto3+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto4+"' rel='lightbox[roadtrip]'><img class='"+pos_foto4+"' src='p_fotos/"+foto4+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto5+"' rel='lightbox[roadtrip]'><img class='"+pos_foto5+"' src='p_fotos/"+foto5+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto6+"' rel='lightbox[roadtrip]'><img class='"+pos_foto6+"' src='p_fotos/"+foto6+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto7+"' rel='lightbox[roadtrip]'><img class='"+pos_foto7+"' src='p_fotos/"+foto7+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto8+"' rel='lightbox[roadtrip]'><img class='"+pos_foto8+"' src='p_fotos/"+foto8+"' alt='foto'/></a>")
document.write("<a href='g_fotos/"+foto9+"' rel='lightbox[roadtrip]'><img class='"+pos_foto9+"' src='p_fotos/"+foto9+"' alt='foto'/></a>")
document.write("</div>")
-->
</script>