Quiero cargar mis imágenes en una secuencia de caja de luz solo cuando la secuencia de caja de luz está abierta (para limitar el ancho de banda).
Hasta ahora he logrado implementarlo en Javascript, pero hay dos problemas con mi código actual;
El código solo parece funcionar DESPUÉS de que la caja de luz ya esté abierta. Así que ahora tengo que hacer clic en la imagen pequeña que abre la ventana emergente de la caja de luz, cerrar la caja de luz nuevamente y luego hacer clic nuevamente en la imagen pequeña porque solo entonces las imágenes adicionales son visibles en la secuencia.
El otro problema es que agregará esas imágenes cada vez que haga clic en la imagen pequeña, que obviamente quiero limitar a una sola vez. Entonces, si cierro Lightbox y lo abro de nuevo, hay 31 imágenes, la próxima vez 46, y así sucesivamente. Pero, obviamente, quiero evitar que se carguen varias veces en la secuencia.
¿Alguna idea sobre cómo se pueden solucionar estos problemas?
Código
$(".smallimage").click(function() { var imageArray = [ "01.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "09.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg", "16.jpg", ]; function assignUrl(img_num) { return "../img/" + imageArray[img_num]; } $(function() { for (var i = 0; i < imageArray.length; i++) { var div = $("<a/>").attr("href", assignUrl(i)).attr("rel", "lightbox[sequence_A]"); div.append($("<img/>").attr("src", assignUrl(i)).attr("class", "image_hidden")); console.log($); $("body").append(div); } $("a[rel=sequence_A]").lightbox(); }) }) <a class="smallimage" href="../img/02.jpg" rel="lightbox[bakel]"> <img src="../img/02-01.jpg"> <h2>Title</h2> </a>