如何使用onclick使用fancybox？

Question

我正在尝试使用JQuery和Fancybox.这是它应该如何使用:http://fancy.klade.lv/howto

但是,我无法为"a href"生成许多ID,我不想让很多fancybox实例准备就绪.所以我希望能够使用一个花哨的盒子实例来做许多做同样事情的超链接.

只要点击这些链接中的任何一个,就会弹出fancybox.我以为我会使用onclick属性作为" <a href"标签或任何其他标签,我可以说这个,但我如何使用fancybox？我尝试了这个,但没有出现:

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

谢谢你的帮助

Answer 1

不要这样做.如果你不能生成唯一的ID(或者根本不想),你应该使用CSS类来代替它:

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

有:

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

(从他们的使用页面).

Answer 2

这演示了如何<a href>通过直接调用fancybox 来使用fancybox(1.3.4)而不需要link元素.

排队:

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