[解決済み] JQuery Fancyboxが動作しない

質問

説明書に従って操作していますが、Fancybox が正しく動作しません。 何が間違っているのか、教えてくれる人が必要です。

何かアイデアはありますか？

HTML

コードです。

<h1><a id="v" class= "letter fancybox" data-fancybox-group="group" href="http://placekitten.com/500/500">V</a></h1>

リファレンス

CSS(ページ上部)。

<link rel="stylesheet" href="home/css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

JS（ページ下部、他のjsを含む）。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!-- FancyBox -->
<script type="text/javascript" src="home/js/jquery.fancybox.pack.js?v=2.1.5"></script>

JS

main.js (inside of document ready)です。

$(".fancybox").fancybox({
    openEffect  : 'fade',
    closeEffect : 'fade'
});

また、プロジェクト全体を1つのフォルダーに入れなかったことについても触れておく必要があると思います。 .cssと.jsファイルを別々のCSSとJSディレクトリに置き、参照される2つのファイルだけを含めました。 このことが関係しているのかどうか、また、ソースフォルダをコピーして、そこにすべてを置いておくべきなのかどうか、疑問に思っています。

解決方法は？

自分のミスを発見した。

私の問題は、私のコードでウェブサイトを参照していたことです（画像を作成するにもかかわらず）。

<h1><a id="v" class= "letter fancybox" data-fancybox-group="group" href="http://placekitten.com/500/500">V</a></h1>

のようなものであるべきです。

href="image.png"