I'm trying to implement a Lightbox-style gallery where clicking a text link launches a slideshow of images that are loaded from an array, not from inline content on the page. All the examples I can find use a group of inline images that are related somehow (i.e. using a rel tag or class). I want to define my images using their paths in a Javascript array.
Anyone know the solution or have any pointers? TIA.
The following works with the example you can download from the plugin site.
Demo here
$(function() {
$('#testLink').click( dynamicLightBoxinit );
});
function dynamicLightBoxinit(){
images = ["photos/image1.jpg", "photos/image2.jpg","photos/image3.jpg","photos/image4.jpg","photos/image5.jpg"];
var imageBuilder='';
for (var i = 0; i < images.length; i++) {
imageBuilder += '<a href="'+images[i]+'"><img src="';
imageBuilder += images[i];
imageBuilder += '" \></a>';
}
var lb = $(imageBuilder);
lb.lightBox();
lb.filter('a:first').click();
}
I'm not sure exactly what you're after, but is this something you're looking for?
images = ["path1.jpg", "path2.jpg"];
for (var i = 0; i < images.length; i++)
{
var img = new Image();
img.src = images[i];
images[i] = img;
}
Rather blunt in-place replacement of the urls to Image-objects, but it was shorter to write.
Your images will be loaded by the browser when the src-attribute is set, and can be appended to any html container per normal dom-operations.
HTH.
