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

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

<强>内联

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

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

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

<强> I帧：

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

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

Answer 3

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

Answer 4

IN CASE，您要在页面中打开多个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.js

Answer 5

罗纳德的回答给了我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>

Answer 6

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

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

Answer 7

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

如何使用onclick使用fancybox？

7 个答案: