如何使用onclick来使用fancybox？

Question

我正在尝试使用JQuery和Fancybox。以下是如何使用它：http://fancy.klade.lv/howto 然而，我无法为“a href”生成许多ID，并且不想制作许多实例的fancybox准备好。因此，我希望能够为执行相同操作的许多超链接使用一个fancybox实例。

每当单击这些链接中的任何一个时，它都应该弹出fancybox。我认为我会使用onclick属性来更改“<a href”标记或任何其他标记，但我该如何使用fancybox？我尝试过这个，但什么也没有出现：

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

感谢您的任何帮助。

- Abs

---

您可以使用任何jQuery选择器将FancyBox分配给元素，而不仅仅是id属性。您的页面结构如何？例如，所有'a'元素是否在单个div中？ - Ayman Hourieh

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

（来自他们的使用页面。）

- cletus

---

纯粹的卓越。完美无缺地工作。谢谢。 - Abs

Answer 2

这个示例展示了如何通过直接调用fancybox来使用fancybox（1.3.4），而不需要使用<a href>链接元素。

内联：

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

- Ronald

---

这段代码的调用非常好，但是你需要在最后一行代码之前添加 return false;。代码如下：}); - quardas

Answer 3

HTML:

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

JS代码：

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

- Lukas Gottschall

Answer 4

如果您想在fancybox中打开同一页面中多个div的内容，可以按照以下代码进行操作：

<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.js文件。

- thegauraw

Answer 5

Ronald回答我在fancyBox v2.1.5中使用#dialogContent内容的字符串。尝试使用：

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

- Silpion

Answer 6

$(".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'
        }
    });
});

- JF Trichard

Answer 7

在Fancybox 3中，可以通过使用以下代码来实现。

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

- Munish Kumar Sharma