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

我猜这只是一个削减＆amp;粘贴错误，但我要说清楚以防万一。你的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属性进行此更改，你应该很高兴。

Fancybox 1.3.4就不会工作了

3 个答案: