How can I use fancybox using onclick?

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).


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

HTML:

<a href="http://domain.com/bigimage.jpg" onclick="return fancybox(this);><img scr="http://domain.com/smallimage.jpg" /></a>

JSCode:

function fancybox(elem) {
elem = $(elem);
if (!elem.data("fancybox")) {
    elem.data("fancybox", true);
    elem.fancybox({
        'overlayColor' : '#000',
        'overlayOpacity' : 0.5
    });
    elem.fancybox().trigger('click');
}
return false; 
}