[jQuery] Problem with Thickbox plugin
Ok, this is rather strange:
I begin with a list of images like this:
<span style="font-family: courier new,monospace;">
<ul class="list_images"></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <li><img src="images/imag1.png"/></li></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
<li><img src="images/imag2.png"/></li></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <li><img src="images/imag3.png"/></li>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></ul></span>
then I include the following piece of jQuery script at <span style="font-family: courier new,monospace; font-weight: bold;">
$(document).ready</span>:
<span style="font-family: courier new,monospace;">
$(".list_images img").each(function(){$(this).wrap("<a href='"+$(this).attr("src")+"' class='thickbox'></a>");});
</span>
as expected, the result is the following modified list, right what I needed to be able to apply the thickbox effect:
<span style="font-family: courier new,monospace;"><ul class="list_images">
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <li><a class="thickbox" href="images/imag1.png"><img src="images/imag1.png"/></a></li>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <li><a class="thickbox" href="images/imag2.png"><img src="images/imag1.png"/></a></li>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <li><a class="thickbox" href="images/imag3.png"><img src="images/imag3.png"/></a></li>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></ul></span><br style="font-family: courier new,monospace;">
Everything is working smoothly so far, but when I load the page in Firefox and click on the images, the lightbox doesn't appear at all and I'm redirected to a blank page with only the image I expected to see (not the effect I'm looking for). Plus, Firebug warns me that theres an error, but I've investigated it and it doest the same everytime you try to load an image in Firefox when it's not inside a HTML document.
And this is when things get freaky: I copy-paste that modified list into a blank document, load it and guess what: it works! But why can't I generate the list dynamically? I'm trying to separate content from presentation in three layers (HTML, script and CSS), so I would really like to make it work. Plus, it's driving me crazy.
Thanks in advance.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/