Triggering FancyBox from a DIV onclick();

Question

This question seems to have been asked a lot, but I haven't seen an answer that works.

So I have a div that works like this:

<div onclick="location.href='http://www.abc123.com';" class="menuitem">
</div>

Now I need the link (specified in location.href) to open up in a fancybox iframe.

I would love to use an A element but this Div holds other items so I don't think I can.

I am open to all suggestions... even using elements other than divs, or using a different jquery iframe lightbox.

Thanks

Tim Mohr

Answer 1

This demonstrates how to use fancybox without requiring the <a href> link element.

Inline (1.3.4):

<div id="menuitem" class="menuitem"></div>

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

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'content': '#dialogContent'
    });
});

Inline (2.1.5):

<div id="menuitem" class="menuitem"></div>

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

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'href': '#dialogContent'
    });
});

Iframe:

<div id="menuitem" class="menuitem"></div>

$('#menuitem').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});