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