Running FancyBox from DIV onclick ();

Question

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

So, I have a div that works as follows:

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

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

I would like to use element A , but this Div contains other elements, so I don't think I can.

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

thank

Tim Mohr

Answer 1

a) you can put other elements inside the tag, it will work, but it is unearthly.

b)

• iframe div ( ajax )
• do $('. menuitem'). click (hiddendiv.fancyb...(). show())

onclick = "", js

Answer 2

, fancybox, <a href>.

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

Answer 3

I did the same and wanted to dynamically call fancybox. I know this may not be perfect, but this is what I did (I use jquery btw):

JS:

jQuery(document).ready(function($){
    $(".fancybox").fancybox();
    $("form").submit(function(){
        $(".fancybox").trigger("click");
        return false;
    });
});

HTML:

<a href="#div_id" class="fancybox"></a>
<div style="display:none;">
     <div id="div_id">
         This will show up in my fancybox
     </div>
</div>

it is a faster way; I found hope this helps someone! happy coding!