Question

My page is at http://www.danielcw.info.

At the bottom I am calling:

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

On:

<div id="single_1">
TESTTESTEST
</div>

Nothing happens. Can anyone please explain where I am going wrong, I see all the JS and CSS loaded and on the page.

Thank you,
Daniel

Answer 1

Typically, Fancybox is initialized on an anchor tag which points to a div element or a link housing the content to be shown on the Fancybox:

HTML:

<a href="#single_1" id="fancybox">Click here to launch Fancybox</a>

<div style="display:none">
    <div id="single_1">
        Content goes here
    </div>
</div>

Javascript:

$(function(){
    $('a#fancybox').fancybox({
        // Fancybox options here   
    })
    .trigger('click'); //Optional - if you wish to trigger the Fancybox after initialization
});