Hola forum,
tengo un problema con una cosilla que quiero añadir a Lightbox, espero que alguno de ustedes me pueda ayudar.
Tengo una serie de imagenes en mi web agrupadas en 3 grupos de Lightbox, al pinchar en una imagen el usuario puede
ir a la siguiente/anterior imagen dentro de esa categoria:
<a href="img/archives/imgA.jpg" rel="lightbox[grupo1]" subimgs="2" title="img A"><img src="img/archives/primgA.jpg"></a>
<a href="img/archives/imgB.jpg" rel="lightbox[grupo1]" subimgs="3" title="img B"><img src="img/archives/primgB.jpg"></a>
<a href="img/archives/imgC.jpg" rel="lightbox[grupo2]" subimgs="4" title="img C"><img src="img/archives/primgC.jpg"></a>
<a href="img/archives/imgD.jpg" rel="lightbox[grupo2]" subimgs="2" title="img D"><img src="img/archives/primgD.jpg"></a>
Hasta aqui todo normal. Sin embargo cada una de esas fotos puede tener fotos asociadas, dato que viene dado por el atributo
"subimgs". Por ejemplo imgB.jpg tiene 3 imagenes asociadas. Estas 3 imagenes (imgB_1.jpg, imgB_2.jpg, imgB_3.jpg) no
forman parte de Lightbox, al menos de momento.
Lo que pretendo es que al visualizar imgB.jpg en Lightbox, LB muestre unos enlaces a esas 3 fotos, y si el usuario pincha
en ellos, LB remplace la imagen (imgB.jpg) por la seleccionada, manteniendo los botones de Siguiente y Previo para ir a
imgA.jpg e imgC.jog respectivamente.
Espero que me sigan hasta aqui!
He conseguido que LB muestre dichos enlaces al presentar las imagenes, para ello he añadido la siguiente rutina a lightbox.js,
que se ejecuta al final de la rutina changeImage() de Lightbox:
LoadSubImages: function()
{
var Archivo = dimeNombreArchivo(this.imageArray[this.activeImage][0]); // Coge el nombre de la imágen cargada en Lightbox
var ArchivoSinExt = quitaExtension(Archivo); // Guarda el ombre de archivo, sin extensión
var Ext = dimeExtension(Archivo); // Guarda la extensión
var SubImg = '';
RemoveChildrenNodes($('divSubImages'));
for ( i=1; i<=this.imageArray[this.activeImage][2]; i++ )
{
$('divSubImages').appendChild(
Builder.node('img', { src: "/img/archives/pr" + ArchivoSinExt + "_" + i + Ext,
id: "subimg" + i,
alt: "View detail"
})
);
$('subimg'+i).observe('click', (function(event) { event.stop(); alert(i); this.changeSubImage(i); }).bind(this));
}
// Oculta div si no hay subimágenes
if ( ! $('divSubImages').hasChildNodes())
$('divSubImages').style.display = 'none';
else
$('divSubImages').style.display = '';
},
Como ven mi rutina carga unos thumbnails que en onclick intentan cargar la imagen seleccionada en Lightbox.
Todo esto mas o menos funciona, los thumbnails aparecen y el evento onclick esta asociado, pero por alguna razon la variable i
no coge el valor correcto, siempre marca uno mas que imagenes quiero cargar.
Alguno sabria decir que estoy haciendo mal? Pueden ver lo que intento hacer en http://www.crack15.com/nueva/archives.php
por favor elijan la segunda foto de la segunda fila, la del ojo gris. Como veran mi script siempre intenta cargar la imagen 4,
aunque se pinche en 1, 2 o 3.
Muchas gracias
