Fancybox 1.3.4 无法工作

Question

嘿，我正在尝试实现 fancybox 1.3.4，但我无法让它工作 这是我的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery    /1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script src="/fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css"   media="screen" />
<script type="text/javascript">

$(document).ready(function() {

/* This is basic - uses default settings */

$(".image").fancybox();

/* Using custom settings */

$(".iframe").fancybox({
    'hideOnContentClick': false
});


$("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();

$(".youtube").click(function() {
    $.fancybox({
        'padding': 0,
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'title': this.title,
        'width': 680,
        'height': 495,
        'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type': 'swf',
        'swf': {
            'wmode': 'transparent',
            'allowfullscreen': 'true'
        }
    });

    return false;
});

这是我想要 fancybox 打开的图像。目前它仅显示在新选项卡中。 我使用 firebug，我可以看到每个脚本和样式表都加载了。

 <a class="image" href="http://localhost:2053/files/15-20/theme3/test%20Photo.jpg">test Photo</a>

Answer 1

我猜这只是一个剪切&粘贴错误，但我将说明明显的情况以防万一。你的 jquery 路径中有空格：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery    /1.4/jquery.min.js"></script>

它应该是：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

要 100% doubleplus 确保 jquery 已加载，请打开 Firebug 控制台并运行此代码片段：

$().jquery;

它应该通过打印版本号来响应。

Answer 2

看起来您的 document.ready 函数并未包含所有选择器语句。您还可能缺少结束脚本标记。

尝试将其添加到脚本的末尾：

    });
</script>

完整脚本：

    <script type="text/javascript">

$(document).ready(function() {

/* This is basic - uses default settings */

$(".image").fancybox();

/* Using custom settings */

$(".iframe").fancybox({
    'hideOnContentClick': false
});


$("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();

$(".youtube").click(function() {
    $.fancybox({
        'padding': 0,
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'title': this.title,
        'width': 680,
        'height': 495,
        'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type': 'swf',
        'swf': {
            'wmode': 'transparent',
            'allowfullscreen': 'true'
        }
    });

    return false;
  });
});
</script>

Answer 3

您应该将 src 更改为

<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>

而不是此处的内容，

<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>

仔细阅读以注意两个示例的 src 属性的差异，
对所有 src 属性进行此更改，您应该可以开始了。