Hola PHPeros!
Poco a poco, voy aprendiendo algo mas y el mundo del javascript me apasiona. Esta mañana decidí hacer algo nuevo donde poner en practica algunas cosas que voy aprendiendo y decidí hacer una galería de imagenes que muestre las imagenes pequeñas y al hacer click sobre ellas, que mostraran su tamaño orginal.
Todo ha salido a la perfección solo que me ha salido un pequeño problema. Digamos que cuando le doy a la flecha de la izquierda para ver imagenes anteriores funciona pero solo una vez. Es decir, si por ejemplo, estamos en la imagen 21 y quiero ver de la 16 hasta la 21 lo hago pero luego al volver a hacer click para ver de la 11 a la 16, no me funciona. He pensado en usar cookies pero no se si el problema erradica por una tontería o haría falta algo mas. Os muestro el código que he elaborado y donde lo tengo subido para que lo probeis.
index.html<script>
function fullImagen(id_img){
var img_peq = document.getElementById("img"+id_img+"_img");
var url_peq = img_peq.src;
var img_gran = document.getElementById("fullimagen_img");
img_gran.src = url_peq;
}
function a(accion){
var inicio = 20;
var total = inicio - 5;
if(accion == "r" && inicio <= 5){
alert('Estas en las primeras 5 fotos, no hay mas antes');
} else {
var a = 1;
for(b=total;b<=inicio;b++){
var mi_img = document.getElementById("img"+a+"_img");
mi_img.src = "imagenes/"+b+".jpg";
a++;
}
inicio = inicio - 5;
}
}
</script>
</head>
<body>
<div id="cuerpo">
<div id="fullimagen" align="center">
<img id="fullimagen_img" src="http://a0.twimg.com/profile_images/1420459595/fondo-de-pantalla-real-madrid.jpg" />
</div>
<div id="espacio">
</div>
<div id="imagenes" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="flecha" style="padding-top:14px;" align="right"><img src="imagenes/adjuntas/izquierda.png" width="50" height="50" onclick="a('r')"/></div>
<div id="img1"><img src="imagenes/1.jpg" name="img1_img" width="80" height="80" id="img1_img" onclick="fullImagen(1)" /></div>
<div id="img2"><img src="imagenes/2.jpg" name="img2_img" width="80" height="80" id="img2_img" onclick="fullImagen(2)" /></div>
<div id="img3"><img src="imagenes/3.jpg" name="img3_img" width="80" height="80" id="img3_img" onclick="fullImagen(3)" /></div>
<div id="img4"><img src="imagenes/4.jpg" name="img4_img" width="80" height="80" id="img4_img" onclick="fullImagen(4)" /></div>
<div id="img5"><img src="imagenes/5.jpg" name="img5_img" width="80" height="80" id="img5_img" onclick="fullImagen(5)"/></div>
<div id="flecha" style="padding-top:14px;"><img src="imagenes/adjuntas/derecha.png" width="50" height="50" onclick="a('s')"/></div>
</td>
</tr>
</table>
</div>
</div>La ubicación donde está alojado este algoritmo está en:
http://angelsamuel.es/miRotador/. He tomado imágenes al azar en google y no me he fijado si estaban bajo derechos de autor o no, espero que con esas os valga de ejemplo. La 1era, es la foto de mi perfil que esta por default pero no está en mi galería.
Volvamos a plantear el problema: Es un "rotador" de imagenes que al cual solo le he dado vida al boton de la izquierda (El de la derecha me falta aún por desarrollar) y pasa algo. Como el boton de la izquierda no funciona, mediante una variable he hecho que la imagen de inicio no sea la 1 ni la 0 si no la 21.
Con lo que yo he hecho, las imagenes que aparecen al hacer click en la flecha izquierda son las de la imagen 21 a la imagen 16 pero una vez que vuelves a pulsar para que vaya de la 16 a la 11, no funciona. Creo creer que el problema es en que la variable inicio siempre almacenara 21 cada vez que le hagas click entonces pensé en usar cookies pero prefiero ver que me aconsejáis y que podría hacer.
Un saludo,
Siquillote.
