Fancybox 2.0无法正常工作，第一次测试非常简单

Question

我的页面是www.danielcw.info。

在底部我打电话：

$(document).ready(function() {
   $("#single_1").fancybox({});
});

上：

<div id="single_1">
TESTTESTEST
</div>

什么都没发生。 任何人都可以解释我哪里出错了，我看到所有的JS和CSS加载在页面上。

谢谢你，丹尼尔

Answer 1

通常，Fancybox在锚标记上初始化，锚标记指向div元素或包含要在Fancybox上显示的内容的链接：

HTML：

<a href="#single_1" id="fancybox">Click here to launch Fancybox</a>

<div style="display:none">
    <div id="single_1">
        Content goes here
    </div>
</div>

使用Javascript：

$(function(){
    $('a#fancybox').fancybox({
        // Fancybox options here   
    })
    .trigger('click'); //Optional - if you wish to trigger the Fancybox after initialization
});

Answer 2

试试用，

$(document).ready(function() {
   $("a #single_1").fancybox();
});

<a id="single_1" href="#">
TESTTESTEST
</a>

Answer 3

你只是实例化了这个插件。 你现在必须触发它。

因此，您可以添加任何DOM元素并观察事件，然后触发插件。

<a href="#" class="fancyme">Click me</a>

JS

$('fancyme').on("click", function() {
  $.fancybox('#single_1');
});

要么

您可以在页面加载时触发

$(function(){
  $.fancybox('#single_1');
});