6

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

但是，我不能为“a href”生成很多 id，我不想让很多 fancybox 实例做好准备。所以我希望能够为许多做同样事情的超链接使用一个精美的盒子实例。

每当单击这些链接中的任何一个时，都会弹出花式框。我以为我会为“ <a href”标签或任何其他标签使用 onclick 属性，我可以更改它，但是如何使用fancybox？我试过了，但什么也没出现：

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

谢谢你的帮助

4

7 回答 7

7

不要那样做。如果您不能生成唯一 ID（或者根本不想），您应该使用 CSS 类来代替：

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

和：

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

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

于 2009-05-16T21:51:55.720 回答
7

这演示了如何<a href>通过直接调用 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'
    });
});

框架：

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

$('.menuitems').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});
于 2012-10-17T13:22:34.857 回答
4

HTML：

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

代码：

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; 
}
于 2011-12-16T10:43:28.670 回答
2

万一，您想在页面内打开多个 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

于 2012-07-06T04:12:09.047 回答
1

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>
于 2014-03-12T15:47:44.143 回答
1 
$(".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'
        }
    });
});
于 2020-08-05T12:32:20.843 回答
0

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

jQuery().fancybox({
    selector : 'your selector'
});
于 2018-12-05T22:10:32.347 回答