Question

I am having a jquery plugin that loads images from Picasa album. But when am trying to add light box to it, it doesnt work. I have read some where that we can to use .delegat or .live or .on in jquery when content is loaded after the dom loads. But am confused.

This is the actual code in normal cases:

jQuery("#ts-display-portfolio a").prettyPhoto({
   animationSpeed:'slow',
   theme:'facebook',
   slideshow:2000
 });

This is what I tried to do, I believe its wrong:

 $(document).delegate(
     "#ts-display-portfolio a", 
     "prettyPhoto", 
     function(){ 
         animationSpeed:'slow',
         theme:'facebook',
         slideshow:2000;
 });

This is how the html is

<a href="img/IMG_3884_large.JPG" >
<img  src="img/IMG_3884.JPG">
</a>

Answer 1

First of all, the code you supplied is not very clear. What is what?

However, if I understand it correctly, the problem is that the HTML generated by Picasa plugin is not ready before the lightBox plugin is instantiated.

The code from the lightBox website:

$(function() {
$('#gallery a').lightBox({fixedNavigation:true});
});

So you need to do 2 things:

1) Make sure that the element containing the photos has the right identifier (class or ID). In this case ID “gallery”
2) Place this code AFTER the loading is complete (in the Picasa script)

 $('#gallery a').lightBox({fixedNavigation:true});