Question

All,
I’m trying to load some content into a fancybox. I’d like to load some page content using AJAX. How can I load this content into my fancybox using AJAX and version 1.3?

Thanks!

Answer 1

To load AJAX content into FancyBox by clicking a link, you could use the following method, taken directly from the FancyBox examples (http://fancybox.net/howto):

<a class="various" href="/demo/ajax.php">Ajax</a>

$(document).ready(function() {
    $(".various").fancybox();
});

Note this works perfectly but if you want to specify other parameters to the fancy box you can do following:

 $(document).ready(function() {
    $(".various").fancybox({
        hideOnOverlayClick:false,
        hideOnContentClick:false,
        ....,
    });
});

For other parameters refer to the fancybox documentation.

You could always specify the href within the JavaScript by using the href option (http://fancybox.net/api).

UPDATE: I see you’re using 1.3.4 so links have been updated accordingly.

UPDATE: If you were to update to FancyBox 2, you could use the following example from the FancyBox website (http://fancyapps.com/fancybox/#examples):

<a class="various fancybox.ajax" href="/demo/ajax.php">Ajax</a>

$(document).ready(function() {
    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});