How can I use fancybox using onclick?

Question

I am trying to make use of JQuery and Fancybox. This is how it should be used: http://fancy.klade.lv/howto

However, I can not generate many ids for "a href" and I do not want to make many instances of fancybox ready. So I want to be able to use one fancy box instance for many hyperlinks that do the same thing.

Whenever any of these links are clicked, the fancybox should popup for it. I thought I would use the onclick attribute for a "<a href" tag or any other tags, I can chnage this but how do I use the fancybox? I tried this but nothing came up:

<a href="#not-working" onclick="fancybox(hideOnContentClick);">Not Working?</a>

Thanks for any help

Answer 1

Don't do it that way. If you can't generate unique IDs (or simply don't want to) you should be doing it with CSS classes instead:

<a href="image.jpg" class="fancy"><img src="image_thumbnail.jpg"></a>

with:

$(function() {
  $("a.fancy").fancybox({
    'zoomSpeedIn': 300,
    'zoomSpeedOut': 300,
    'overlayShow': false
  }); 
});

(from their usage page).

Answer 2

This demonstrates how to use fancybox (1.3.4) without requiring the <a href> link element by calling fancybox directly.

Inline:

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

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

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

Iframe:

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

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