Javascript 如何使用onclick使用fancybox？

我正在尝试使用JQuery和Fancybox。这就是它的使用方法：

但是，我不能为“a href”生成很多ID，我也不想让fancybox的许多实例就绪。因此，我希望能够使用一个奇特的box实例来创建多个超链接，这些超链接可以做同样的事情

无论何时单击这些链接，fancybox都会弹出。我想我应该使用onclick属性来表示“

---

感谢您的帮助，请不要这样做。如果您无法生成唯一ID（或根本不想生成），则应使用CSS类：

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

（从其使用页面）。

HTML：

JSCode:

函数fancybox（elem）{
elem=$（elem）；
如果（！元素数据（“fancybox”））{
元素数据（“fancybox”，真）；
范克盒({
“套色”：“000”，
“产能过剩”：0.5
});
elem.fancybox（）.trigger（'click'）；
}
返回false；
}

如果您想在页面中打开多个div的内容，即fancybox中同一页面的一部分，您可以通过以下代码执行此操作：

<a href="#show-in-fancy1" class="popup">open_fancy1</a>
<a href="#show-in-fancy2" class="popup">open_fancy2</a>
<div style="display:none">
  <div id="show-in-fancy1">
    this content is shown in fancybox.
  </div>
  <div id="show-in-fancy2">
    this content is shown in fancybox.
  </div>
</div>
<script>
  $(document).ready(function(){
    $('.popup').fancybox({
          'zoomSpeedIn': 300,
          'zoomSpeedOut': 300,
          'overlayShow': false
      });
  });
</script>

此内容显示在fancybox中。
此内容显示在fancybox中。
$（文档）.ready（函数（）{
$（'.popup'）.fancybox({
“zoomSpeedIn”：300，
“zoomSpeedOut”：300，
“叠加显示”：错误
});
});

---

注意：确保已包含fancybox.js

这演示了如何通过直接调用fancybox来使用fancybox（1.3.4），而无需使用

链接元素

内联：

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

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

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

$（'.menuitems'）。单击（函数（）{
$.fancybox({
键入：“内联”，
内容：“#对话内容”
});
});

Iframe：

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

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

$（'.menuitems'）。单击（函数（）{
$.fancybox({
键入：“iframe”，
href:'http://www.abc123.com'
});
});

Ronald answer在fancyBox v2.1.5中给了我字符串#对话内容。请尝试使用：

<div id="item"></div>

<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

<script type="text/javascript">
jQuery(document).ready(function() {
 jQuery("#item").fancybox({
       type: 'inline',
       content: jQuery('#data').html()
   });

});
</script>

Lorem ipsum dolor sit amet，是一位杰出的献身者。
jQuery（文档）.ready（函数（）{
jQuery（“#项”）.fancybox({
键入：“内联”，
内容：jQuery（'#data'）.html（）
});
});

在fancybox 3中，可以使用以下代码来完成

jQuery().fancybox({
    selector : 'your selector'
});

---

您可以使用任何jQuery选择器将FancyBox分配给元素，而不仅仅是id属性。您的页面是如何构造的？例如，所有“a”元素都在一个div中吗？纯卓越。工作非常出色。谢谢。此代码的调用非常好，但您需要添加return false；在最后一行代码之前：}）；

<div id="item"></div>

<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

<script type="text/javascript">
jQuery(document).ready(function() {
 jQuery("#item").fancybox({
       type: 'inline',
       content: jQuery('#data').html()
   });

});
</script>

jQuery().fancybox({
    selector : 'your selector'
});

$(".btn_fancybox_messagerie").on("click", function(event) {
    //event.preventDefault();
    var to = $(this).text();
    $.fancybox.open({
        type: 'iframe',
        src: 'http://..../form-messagerie.php?to=' + to,
        toolbar  : false,
        smallBtn : true,
        iframe : {
            preload : false,
            scrolling: 'auto'
        }
    });
});