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>

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

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

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

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>

文件夹布局： enter image description here

无法使用html / php使用fancybox-function工作

1 个答案: