Question

jsFiddle Full Code: http://jsfiddle.net/bvmdW/

I used jQuery Embedly to replace YouTube links with thumbnail and videos. I hide the videos part using display:none in CSS. The Embedly script will dynamically create the following DOM during the process:

<li id="1">
    <img rel="vidPreview-1" class="embedly" src=".....">
    <div id="vidPreview-1" class="vidPreview"> iframe videos here </div>
</li>
<li id="1">
    <img rel="vidPreview-2" class="embedly" src=".....">
    <div id="vidPreview-2" class="vidPreview"> iframe videos here </div>
</li>

Both <img rel="vidPreview-X" and <div id="vidPreview-X are dynamically generated by Embedly.

Now, I’ll also use jQueryTools Overlay plugin to popup the hidden videos upon clicking the thumbnail. I used:

$("img[rel]").live('click', function () {
    $(this).overlay().load();
});

but it seems the Overlay plugin doesn’t recognize live(). In Firebug it says that: uncaught exception: Could not find Overlay: vidPreview-X

Can someone please guide me how to make a live() with jQueryTools Overlay?

Answer 1

In img tag you missed # in rel attribute.Please add # to the rel attr value.Check again.

 <li id="1">
     <img rel="#vidPreview-1" class="embedly" src=".....">
     <div id="vidPreview-1" class="vidPreview"> iframe videos here </div> </li> <li id="1">
     <img rel="#vidPreview-2" class="embedly" src=".....">
    <div id="vidPreview-2" class="vidPreview"> iframe videos here </div> </li>