Jquery 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>

我还尝试了另一个名为放大弹出的插件，但它也没有响应。我认为这与我的wordpress主题的设置有关。

这

href=”http://placehold.it/350x125“

不会对fancybox说您正在打开一张

图像

，因此您或者：

1） 。将

fancybox.image

特殊类添加到您的链接中

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

3） 。将

类型

选项添加到您的fancybox脚本中，如

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

不管你认为什么对你的案子更有效

注意：数字1）。(二)。以上仅适用于fancybox v2.x。数字3）。适用于v1.3.4和v2.x

编辑：在代码和jQuery v1.8.3中包含一个

有两个链接：

• 使用“fancybox.image”类的人：正在工作
• 其他无：不工作

---

此

$（function（）{

（或

jQuery（function（$）{

）是此

jQuery（document.）的别名。ready（function（$）{

所以把一个嵌套在另一个里面是多余的。哦，好吧，这很有意义！如果我想在弹出窗口中显示html内容呢？也有指定的类型吗？嗯，我仍然无法让它使用这些选项中的任何一个。我有jquery 1.8.3，这对fancybox来说太旧了吗？@Evan jquery 1.8.3是可以的，fancybox的哪个版本？它的版本2.1.5也许我没有正确地向头部调用它，让我编辑我的问题以显示我向头部调用的内容。@Evan:这里使用的是

数据fancybox类型

属性（需要HTML5

DOCTYPE

），而不是

fancybox.image

类。

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