jQuery Lightbox or equivalent with image array

Question

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.

Answer 1

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.

Answer 2

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();
     }