Question

I am trying to use the Fancy Box 2 plugin (fancyapps.com).

All is well except I cannot figure out how to include a DOM element properly.

I am calling this after a form submit that is returning information via ajaxform and validation. documentation says to use the following for dom.

//DOM element:

$.fancybox( $("#inline"), {
    title : 'Custom Title'
});

Now if i create an id on the page in a div it doesn’t pull it. Also the div shows.

I tried using the other method (custom object)

$.fancybox({
    href: 'example.jpg',
    title : 'Custom Title'
});

and it does not seem to work with php files. I am trying to populate the lightbox with information from a php file but i get error loading content.

Answer 1

You should probably use ajax() in here.

As I look into the FancyBox plugin, it does support ajax.

$("#various3").fancybox({
    ajax: {
        type: "POST",
        data: 'mydata=test'
    }
});​

HTML

<li><a id="various3" href="/data/login.php">Ajax - passing custom data</a></li>

All of these where based on its demo’s source code. Demo page & http://fancybox.net/js/.

UPDATE:

I did a quick test using fancyBox version 2, pertaining your question.

I achieve to pull the ajax contents:

$(document).ready(function() {
    $('.fancybox').fancybox({
        title: 'Custom Title'
    });
});​

HTML

<a class="fancybox fancybox.ajax" href="ajax.txt">Show content</a>
<div id="content">
</div>

I’ve noticed that the important part in here is naming your class to class="fancybox fancybox.ajax".