Tengo una galeria de imagenes en javascript, y me gustaria que apareciera un boton para ir a la imagen siguiente y otro para la anterior. Si estamos en la ultima, no se puede ir a la siguiente, y si estamos en la primera, no se puede ir a la anterior.
Del mismo modo, me gustaria que pinchando en la imagen se vaya a la siguiente imagen.
Os paso el código (inicialmente con 3 imágenes):
Código PHP:
<script type="text/javascript">
var dimension="1x1" //Dimesiones de la galeria
//galleryarray[x]=["imagen", "titulo(opcional)", "descripcion(opcional)", "enlace(opcional)"]
var galleryarray=new Array()
galleryarray[0]=["juventud/figueroa1.jpg", "Diversas actividades durante mi etapa como entrenador de natación del Club Figueroa", "Diversas actividades durante mi etapa como entrenador de natación del Club Figueroa", ""]
galleryarray[1]=["juventud/figueroa2.jpg", "En una de las actividades de mi etapa como entrenador de natación del Club Figueroa", "En una de las actividades de mi etapa como entrenador de natación del Club Figueroa", ""]
galleryarray[2]=["juventud/figueroa3.jpg", "Durante mi etapa como entrenador de natación del Club Figueroa", "Durante mi etapa como entrenador de natación del Club Figueroa", ""]
var href_target="_new" //Para los enlaces, se abre en una nueva ventana
var totalslots=dimension.split("x")[0]*dimension.split("x")[1]
function buildimage(i){
var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'">' : ""
tempcontainer+='<img src="'+galleryarray[i][0]+'" border="1" title="'+galleryarray[i][1]+'">'
tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
return tempcontainer
}
function jumptopage(p){
var startpoint=(p-1)*totalslots
var y=1;
for (i=0; i<totalslots; i++){
document.getElementById("slide"+i).innerHTML=(typeof galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
}
while(document.getElementById("navlink"+y)!=null){
document.getElementById("navlink"+y).className=""
y++
}
document.getElementById("navlink"+p).className="current"
}
var curimage=0
for (y=0; y<dimension.split("x")[1]; y++){
for (x=0; x<dimension.split("x")[0]; x++){
if (curimage<galleryarray.length)
document.write('<div id="slide'+curimage+'" class="slideshow">'+buildimage(curimage)+'</div>')
curimage++
}
document.write('<br style="clear: left" />')
}
</script>
<!--Navegación-->
<div id="navlinks">
<script type="text/javascript">
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
document.getElementById("navlink1").className="current"
</script>
</div>
