CODEWITHSUNDEEP
jquerylightbox
da5id
da5id

Reputation: 9146

jQuery Lightbox or equivalent with image array

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.

Upvotes: 2

Views: 3628

Answers (2)

redsquare
redsquare

Reputation: 78687

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

Upvotes: 4

falstro
falstro

Reputation: 35687

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.

Upvotes: 0

Related Questions