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