Question

I’d like to use the jQuery plugin Fancybox on my site – for the most part this works perfectly, however, on this particular page I am loading up someone’s profile via Ajax, and would like to have their picture display using Fancybox if the user clicks on the thumbnail.

If I have this code loaded as a test in the container page, it works fine, however, if I place it into the page that is called through Ajax it simply won’t work:

<script type="text/javascript">
    $(document).ready(function() {
        $("a#testing").fancybox();
    });
</script>

<a id="testing" href="pic.jpg"><img alt="test caption" src="thumb.jpg" /></a>

I have tried:

1. Placing the document.ready code onto the container page
2. Placing the document.ready code onto the page called via Ajax
3. Removing the document.ready trigger and just placing the code directly below the picture

But none work! Any help would be very much appreciated, thank you 🙂

Answer 1

Add

 $("a#testing").fancybox(); 

to the success function of your AJAX call.