Question

The code below works fine. The fancybox appears on document ready.

jQuery(document).ready(function() {
    $.fancybox(
        '<h2>Hi!</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque</p>',
        {
                'autoDimensions'    : false,
            'width'                 : 350,
            'height'                : 'auto',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none'
        }
    );
});

It appears as it is supposed to appear.
Later on some event I need to use $.fancybox.close(); to close this fancybox, not any.
How to trigger exactly this fancybox? I think I need to add ad id to it. How to do that?

Answer 1

make first a div in HTML, and than define it as fancybox in Javascript

<div style="display:none">
    <div id="myFancyBox">
         <h2>Hi!</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque</p>
    </div>
</div>

JavaScript:

<script type="text/javascript">
    $("#fancyBoxLink").fancybox({
        'href'   : '#myFancyBox',
        'autoDimensions'    : false,
        'width'                 : 350,
        'height'                : 'auto',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'

    });
</script>