无法使用 html/php 使 fancybox 功能正常工作

Question

我一遍又一遍地寻找答案，但我似乎无法弄清楚这个问题。我想简单地使用 fancybox 来显示图像。

这是我第一次使用 fancybox，所以可能有经验的人会在几秒钟内注意到问题。

我已按照 http://fancyapps.com/fancybox/ 中给出的步骤进行操作。

这是我的 head.php 文件中的代码：

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

这是从指定网站复制的。我使用的是完全相同的 samen 文件夹名称 "fancybox"，所以我认为这不是问题所在。在我想要加载图像的代码中，这就是我所拥有的：

echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';

加载此页面后，我有此代码（也从给定网站复制）：

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});

然而，当我单击此图片时，它不会在 fancybox 中打开，而是在新选项卡中打开，而不是只显示没有任何精美样式的图片。

提前感谢您的帮助！

Answer 1

这肯定是因为您的文件不在您的链接指向的位置 to.And 您应该会在控制台中看到几个与此相关的错误。

Here is a test page using your code with the urls modified to match the folder layout shown in the image below。如您所见，它确实有效。因此，您的问题一定是由于您的网址不正确或文件本身丢失造成的。

这是测试页面的代码：

<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Untitled Document</title>

   <!-- 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="jquery.mousewheel-3.0.4.pack.js"></script>

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

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

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


<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>
</head>
<body>
<?php
    $row['bestandsnaam'] = 'images.jpg';
    echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';
?>
</body>
</html>

文件夹布局：

无法使用 html/php 使 fancybox 功能正常工作

Can't get the fancybox-function to work using html/php

html

javascript

php

jquery

fancybox