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

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

可以肯定的是，由于文件不在链接指向的位置，因此您应该在控制台中看到与此相关的一些错误。

这是一个使用您的代码的测试页，其中的URL进行了修改，以匹配下图所示的文件夹布局。 如您所见，它确实有效。 因此，您的问题一定是由于您的网址不正确或文件本身丢失。

这是来自测试页面的代码：

<!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-function正常工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-22 11:37:24

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-22 11:37:24

解决方案1
0 已采纳 2015-03-22 11:37:24