FancyBox链接没有显示在灯光盒中-我遗漏了什么？

Question

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。

我也尝试过另一个叫做MagniicPopup的插件，但是它也没有响应。我想这和我的WordPress主题的设置有关。

Answer 1

这，这个href="http://placehold.it/350x125"不要对FancyBox说您正在打开image所以你任一&nbsp;:1)。添加fancybox.image特制班级，等级你的链接就像<a&nbsp;class="cta-nav-hover&nbsp;fancybox&nbsp;fancybox.image"&nbsp;href="http://placehold.it/350x125"&nbsp;title="Bio"><span></span></a>2)。添加(HTML 5)data-fancybox-type属性添加到您的链接中，如下所示<a&nbsp;data-fancybox-type="image"&nbsp;href="http://placehold.it/350x125"&nbsp;title="Bio"&nbsp;class="cta-nav-hover&nbsp;fancybox"><span></span></a>3)。添加type选择FancyBox脚本，如$(".fancybox").fancybox({ &nbsp;&nbsp;&nbsp;type:&nbsp;"image"});你认为对你的案子更有用的东西。注：数字1)。和2)。以上工作仅适用于FancyBox v2.x。(第三条)。为V1.3.4和V2.x工作编辑*包括JSFIDDLE使用您的代码和jQueryv1.8.3。有两个环节：一个使用“fancybox.Image”类：工作其他没有：不工作