lightbox 2: how to add dynamically images via javascript

Question

I\'m having trouble attempting to dynamically add images, since lightbox2 (by lokesh dakar) is initialized after document load by existent html

Answer 1

To add existing img tags to be lightboxified on their own (without gallery functionality) one could use something like:

$('img')
    .wrap(function(index) {
        return '<a href="'+$(this).attr('src')+'" data-lightbox="image-'+index+'"></a>';
    });

Just add it BEFORE inserting the lightbox.js

Answer 2

After a couple of hours spent on testing and reading the code, I came up with this magic code:

//set album values
IMG = $('<a href="...">')
    .attr('data-lightbox','roadtrip')
    .append('<img src="...">')
//lightbox open:
IMG.click(function(){
    lightbox.start($(this));
    return false;
})

some helpful tips:

• don't set data with $(...).data('lightbox','group'), since lightbox uses the selector $('a[data-lightbox]') each time a link is clicked. Instead, you should use $(...).attr('lightbox','group').

• lightbox.album is a temporary variable which you don't need to deal with.