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

Solution 1

a) you can put other items inside an a tag, it will work but it's unsemantic.

b)

1. put your iframe in a hidden div (or ajax it in on click)
2. the do $('.menuitem').click(hiddendiv.fancyb...().show())

Personally i would always avoid using onclick="" it's much easier to maintain your code in an external js file

Solution 2

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'
    });
});

Comments

[Tim]

Hello, Could you please elaborate on your point b)1. "Ajax it on click".

[Tim]

Also, I am not sure how well this will work as I have to load several external content urls, from the one page.

[Haroldo]

rather than have all these hidden iframes about wasting load time, you can load one at a time in on demand with ajax.