CODEWITHSUNDEEP
jqueryhtmlonclicklightboxfancybox
Tim
Tim

Reputation: 3131

Triggering FancyBox from a DIV onclick();

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

Upvotes: 3

Views: 25461

Answers (3)

Ronald
Ronald

Reputation: 431

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

Upvotes: 21

pythonian29033
pythonian29033

Reputation: 5207

I was doing the same thing and wanted to invoke fancybox dynamically also I know it might not be ideal, 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's a quicker easier way; I found, hope it helps someone! happy coding!

Upvotes: 0

Haroldo
Haroldo

Reputation: 37377

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

Upvotes: 1

Related Questions