Fancybox 链接未显示在灯箱中 - 我缺少什么？

好吧，我认为我正确地实现了这一点，但我想我一定在某个地方犯了错误。

这是我的代码：

Jquery在这里：

jQuery(document).ready(function( $ ){

$(function() {
    $( ".cta-nav-hover" ).tooltip({
        show: null,
        position: {
            my: "right+40 bottom",
            at: "left bottom"
        },
        open: function( event, ui ) {
            ui.tooltip.animate({ top: ui.tooltip.position().top - 10 }, 75 );
        }
    });
});





$(function() {
    $(".fancybox").fancybox();
});

});

然后是 HTML：

<div id="cta-nav-wrapper">
    <ul id="cta-nav">
        <li class="bio">
            <a href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>
        </li>
    </ul>
</div>

我认为这会起作用，但是当我单击链接时，它只会将我带到占位符图像而不是弹出窗口。我做错了什么？看起来好像我已经正确排列了文件，或者至少当我通过 firebug 检查它们时，它会转到正确的 js。

这就是我在脑海中所说的：

<!-- Add fancyBox -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/content/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js"></script>

<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.js"></script>




<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/magnific-popup.css"> 
<!-- Magnific Popup core JS file -->
<script src="/wp-content/themes/hustle-child/includes/js/magnific-popup.js"></script>

我还尝试了另一个名为 Magnific Popup 的插件，但它也没有响应。我认为这与我的 WordPress 主题设置有关。

This href="http://placehold.it/350x125"没有告诉 fancybox 您正在打开一个image so you either :

1）。添加fancybox.image特别的class到你的链接就像

<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>

2）。添加 (HTML5)data-fancybox-type归因于您的链接，例如

<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>

3）。添加typefancybox 脚本的选项，例如

$(".fancybox").fancybox({
   type: "image"
});

无论您认为什么更适合您的情况。

NOTE：数字 1)。和2）。以上仅适用于 fancybox v2.x。 3）。适用于 v1.3.4 和 v2.x

EDIT: 包括一个JSFIDDLE http://jsfiddle.net/WWxLQ/使用您的代码和 jQuery v1.8.3。

有两个链接：

• 一个使用“fancybox.image”类：working
• 其他没有：不工作