Fancybox 2 - Ajax call loses CSS formatting

Question

I have a fancybox2 that is called with an inline div. This fancybox already has styling applied using static dummy content. It works as is, but I need to fill it with dynamically loaded content via ajax. Unfortunately when I make the ajax call it loads the required content but loses all css styling which I believe is due to the html structure being different (which I doubt it should be!)

To start with, here is my dummy link and dummy div to be displayed:

<!-- Here is the link -->
<a href="#gallery_piece1" data-id="11" class="gallery_item fancybox-gallery fancybox.inline" rel="gallery">

<!-- Here is the div -->
<div id="gallery_piece1" class="artpiece_profile">
    <div class="main_piece">
        <img src="images/gallery_dummy_big.jpg">
    </div>
    <div class="art_text">
        <div class="art_text_left" id="scrollbar">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. etc...</p>
        </div>
        <div class="art_text_right">
            <h1>Dummy Title</h1>
            <h2>Joe Bloggs</h2>
        </div>
    </div>
    <div class="clear"></div>
</div>

To start with I've removed everything out of the dummy div so it's just the following:

<div id="gallery_piece1" class="artpiece_profile">
</div>

and the inner parts are now in the div that is being loaded via ajax:

<div class="main_piece">
        <img src="remote_image_filename.jpeg" alt="image" />
    </div>
    <div class="art_text">
        <div class="art_text_left" id="scrollbar">
            <p>info</p>
        </div>
        <div class="art_text_right">
            <h1>An Artwork</h1>
            <h2>Joe Bloggs</h2>
        </div>
    </div>
    <div class="clear"></div>

Now here is the jquery ajax call I'm making:

<script type="text/javascript">
    $("a").click(function() {
        var imageId = $(this).data('id');
        $.ajax({
            type: "POST",
            url: "ajaxfile.php",
            async: "false",
            data: {imageId:imageId},
            success: function(data) {
                $.fancybox(data, {
                    openEffect  : 'none',
                    closeEffect : 'none',
                    prevEffect  : 'none',
                    nextEffect  : 'none',
                    maxWidth    : 900,
                    maxHeight   : 700,
                    fitToView   : false,
                    width       : '50%',
                    arrows      : true,
                    helpers : {
                        media : {},
                        buttons : {},
                        overlay : {
                            css : {
                                'background' : 'rgba(0,0,0,0.8)'
                            }
                        }
                    }
                });
            }
        });

    });
</script>

As noted before, the content loads fine but the html structure seems to have changed compared to the static dummy one.

Firebug shows the following structure for the static fancybox:

<div class="fancybox-overlay fancybox-overlay-fixed" style="width: auto; height: auto; background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8); display: block;">
    <div class="fancybox-wrap fancybox-desktop fancybox-type-inline fancybox-opened" tabindex="-1" style="width: 870px; height: auto; position: absolute; top: 20px; left: 518px; opacity: 1; overflow: visible;">
        <div class="fancybox-skin" style="padding: 5px; width: auto; height: auto;">
            <div class="fancybox-outer">
                <div class="fancybox-inner" style="overflow: auto; width: 860px; height: auto;">
                <div id="gallery_piece1" class="artpiece_profile" style="display: block;">
                    <div class="main_piece">
                    <div class="art_text">
                <div id="scrollbar" class="art_text_left">
                <div class="art_text_right">
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <a class="fancybox-nav fancybox-prev" href="javascript:;" title="Previous">
    <a class="fancybox-nav fancybox-next" href="javascript:;" title="Next">
</div>
<a class="fancybox-item fancybox-close" href="javascript:;" title="Close"></a>
</div>
  </div>
</div>

And shows the following for the ajax loaded fancybox:

<div class="fancybox-wrap fancybox-desktop fancybox-type-html fancybox-opened" tabindex="-1" style="width: 848px; height: auto; position: fixed; top: 116px; left: 529px; opacity: 1; overflow: visible;">
<div class="fancybox-skin" style="padding: 5px; width: auto; height: auto;">
    <div class="fancybox-outer">
        <div class="fancybox-inner" style="overflow: auto; width: 838px; height: auto;">
            <div class="main_piece">
            </div>
            <div class="art_text">
                <div class="clear"></div>
            </div>
        </div>
        <a class="fancybox-item fancybox-close" href="javascript:;" title="Close"></a>
    </div>
</div>
<div class="fancybox-overlay fancybox-overlay-fixed" style="background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8); display: block; width: auto; height: auto;"></div>

I can see two things that stand out straight away: 1. The div with a class of "fancy-overlay" is now at the bottom instead of encompassing the everything and being at the top. 2. Some elements are missing - specifically the nav buttons.

I've been struggling with this all day and if anyone can shed some light on why this is happening and how to remedy it I'd be over the moon ;)

Thanks!

Answer 1

Fancybox supports ajax requests internally... You can try to invoke the API like this:

<div id="gallery_piece1" class="artpiece_profile fancybox.ajax" href="/path/to/resource/ajaxfile.php?data-id=11">
</div>

script:

<script type="text/javascript">
    $(document).ready(function() {
        $(".artpiece_profile").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
    });
});
</script>