Lightbox on images loaded by jquery from picasa

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>

Is the HTML generated by the plugin? A typical lightbox plugin uses the click event and shows the image in a fancy overlay instead of following the link. Is that the case? BTW: 1) .delegate() has been superseded by the .on() method 2) .live() method is deprecated. Use .on() to attach event handlers. — Robert, May 30 '12 at 12:10
Yes, html is generated after the document is loaded. Is the code I wrote correct if i replace .delegate with .on ? — esafwan, May 30 '12 at 12:22

score 1 · Accepted Answer · answered May 30 '12 at 14:21

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

Lightbox on images loaded by jquery from picasa

1 Answers1