jQuery Fancybox options being ignored

Question

Hi, on the site I'm working on I have a fancybox that triggers when the page loads that displays the contents of a hidden <div>, but for some reason any options such as height, width etc are getting ignored. I need to be able to use the 'callbackOnShow:' option as I need to have some click() functions within the fancybox.

My code is as follows, and is within a document ready function:

I put the height 5000 thing in as a test, as nothing seems to be working.

// FANCY BOX
    if ($('#link').length) {
        $('#link').click(function(){
            $('#link').fancybox({
                'scrolling' : 'no',
                'hidth': 5000,
                'height': 465,
                'content' : $("#lightbox-content").html()
            });
        });
    }

    $("#link").fancybox().trigger('click');

Any idea why this would not be working as expected?

Thanks, Dave

Updated Code:

// FANCY BOX
$("#link").fancybox({
    'scrolling' : 'no',
    'width': 5000, 
    'height': 2000,
    'callbackOnShow': function() { alert('hello'); },
    'content' : $("#lightbox-content").html()
}).trigger('click');

Answer 1

It won't re-create the fancybox, so when you're calling $("#link").fancybox() you're creating a fancybox with default options right then...later specifying the options won't override the defaults you already used.

To get what you're after, just provide the options at the time you're calling it:

$("#link").fancybox({
  'scrolling' : 'no',
  'width': 5000, //was hidth, make sure to correct this
  'height': 465,
  'content' : $("#lightbox-content").html()
}).trigger('click');

Also in jQuery there's no need for a .length check, if it finds elements it'll do something, if it doesn't then it won't...it's handled internally as part of how jQuery chaining works.