Question

I am using facebox (http://famspam.com/facebox) to hold some content loaded via an ajax call. The content being loaded has a jquery ui slider element inside of it. In non-ajax loaded content I can use either the $(window).bind(‘load’, function()) or $(document).ready(function()) methods in order to trigger the construction of the slider via a call like $(‘#targetDiv’).slider(…);

However, when loading into facebox neither of these two methods appear to work. The only way I have been able to do this successfully is to have an image at the end of my content with an onload calling the readying function.

Is there some other, not-so-hackish, way to do this?

Answer 1

I have hacked apart my facebox a fair few times and added in a few extra functions. One of them is a callback function for when it’s loaded (passing the facebox content as a param)

You can find my version of facebox here

You can use it like so:

jQuery.facebox({ ajax: 'load-file.html',
    callback: function(fb) {
       // You can now use fb as a scope
       jQuery('.find-me', fb).doSomething();
    }

There are a few other little functions in there aswell, just check from line 66 down 🙂

Hope this helps