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