Loading dynamic AJAX content into Fancybox

Question

This scenario:

The user inserts his zip into an input-field, and when clicking the magic button, he gets to see stores closest to his location. I ca

Answer 1

I was interested in doing the same thing. I came to a similar solution, however it's different than any others recommended here. After looking at the documentation for both API's, this should work in V1 or V2.

$('#button').on('click', function(){    
    $('#foo').load('/content.html', function(){

        var $source = $(this);

        $.fancybox({
            content: $source,
            width: 550,
            title: 'Your Title',
            etc...
        });
    });
});

Then, your container for the data.

<div id="foo" style="display: none;"></div>

Answer 2

Try:

$.fancybox({
  type: 'ajax',
  ajax: { 
     url: nzData
    }
});

Answer 3

I know this is an old question, but I've recently had to deal with something similar. Here is what I did to load ajax into fancybox.

$('#button').on('click', function(){
    $.fancybox({
        width: 400,
        height: 400,
        autoSize: false,
        href: '/some/url-to-load',
        type: 'ajax'
    });
});