jQuery FancyBox/Lightbox problem

Question

Hi all,

i write some html with JS into a div.

like this

$("#picdiv").html("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>");

it is just an example.

So, i have in $(document).ready Funcktion this code.

$('a[rel=lightbox]').fancybox();

but if i click on the link, a get to the page with picture... i know the Problem must be, i write the html with js, but i have no other option. So haw can I make fancybox works?

Answer 1

This is due to how jQuery works. The fancybox function will only work for current elements on the page and not ones dynamically added by javascript.

A quick fix might be to be modify the code as follows:

$("#picdiv").append($("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>").fancybox());

Not sure if the above will work, but the general idea is to ensure that any new elements created have the plugin applied.

Answer 2

solution

$('.picture_display').find('a[rel=lightbox]').fancybox();