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

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