Question

我正在尝试使用FancyBox，所以我将文件夹“fancybox”添加到我的主页，添加了js-scripts等在fancybox主页上描述但是当我点击缩略图时唯一发生的事情是图片以普通网址打开整个网站...

那有什么不对？

我尝试更改<a>标记的类，但它不起作用，所以我真的不知道出了什么问题。

我很抱歉我无法更好地描述问题，但网站上没有“错误消息”。我看到的唯一错误消息是在Firefox控制台中：

TypeError：$（...）。attr（...）。fancybox不是函数

如果删除函数.attr()，我会收到此错误：

TypeError：$（...）。fancybox不是函数

有效代码：

<head>
<!-- ---------- Fancy-Box Includes ----------  -->

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- ---------- End Fancy-Box Includes ---------- -->

<!-- ---------- Use Fancy-Box ---------- -->
<script type="text/javascript">
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
    beforeShow: function () {
        /* Disable right click */
        $.fancybox.wrap.bind("contextmenu", function (e) {
                return false; 
        });
    }
});
</script>
<!-- ---------- End Use Fancy-Box ---------- -->
</head>

并在body-tag中 - 正常的导航内容等等，然后是这个表：

<table cellspacing="0" cellpadding="0" summary="Image gallery">
<tbody>
<tr class="row_0 row_first even">
<td class="col_0 col_first" style="width:25%;">
<div class="image_container">
<a class="fancybox" href="./media/picture01.jpg" title="picture01"><img src="./media/./media/picture01.jpg" width="150" /></a>
</div>
</td>

<!-- ..... more pictures ..... -->

</tr>
</table>

Answer 1

PHP并不知道fancybox是一个函数，因为fancybox位于名为“fancybox”的文件夹中，但不在webspace的root中 - 所以正确的代码必须如下所示：

<head>
<!-- ---------- Fancy-Box Includes ----------  -->

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="./fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="./fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="./fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="./fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="./fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- ---------- End Fancy-Box Includes ---------- -->

<!-- ---------- Use Fancy-Box ---------- -->
<script type="text/javascript">
$(".fancybox") 
.attr('rel', 'gallery')
.fancybox({
    beforeShow: function () {
        /* Disable right click */
        $.fancybox.wrap.bind("contextmenu", function (e) {
                return false; 
        });
    }
});
</script>
<!-- ---------- End Use Fancy-Box ---------- -->
</head>

使用FancyBox在整个网站上打开图片

1 个答案: