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

Question

I have searched for an answer over and over again, but I can't seem to figure this one out. 我一遍又一遍地寻找答案，但是我似乎无法弄清楚这个答案。 I want to simply use fancybox to show an image. 我只想使用fancybox来显示图像。

This is the first time I use fancybox, so probably someone experienced will notice the problem within seconds. 这是我第一次使用fancybox，所以有经验的人可能会在几秒钟内注意到问题。

I've followed the steps given at http://fancyapps.com/fancybox/ . 我已按照http://fancyapps.com/fancybox/中给出的步骤进行操作。

This is the code I have in my head.php file: 这是我的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>

This is copied from the given website. 这是从给定的网站复制的。 I'm using the exact samen folder-name "fancybox", so I think that can't be the problem. 我正在使用确切的Samen文件夹名称“ fancybox”，所以我认为这不是问题。 In my code where I want to load an image, this is what I have: 在我要加载图像的代码中，这是我的：

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

After loading this page, I have this code (also copied from the given website): 加载此页面后，我有以下代码（也从给定的网站复制）：

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

Yet when I click this image, it won't open in fancybox, but it opens in a new tab instead only showing the image without any fancy styling. 但是，当我单击该图像时，它不会在fancybox中打开，而是在新选项卡中打开，而不是仅显示图像而没有任何花哨的样式。

Thanks for your help in advance! 谢谢您的帮助！

Answer 1

This is most assuredly due to your files not being in the place your links are pointing to.And you should be seeing several errors in the console related to this. 可以肯定的是，由于文件不在链接指向的位置，因此您应该在控制台中看到与此相关的一些错误。

Here is a test page using your code with the urls modified to match the folder layout shown in the image below . 这是一个使用您的代码的测试页，其中的URL进行了修改，以匹配下图所示的文件夹布局。 As you can see it does work. 如您所见，它确实有效。 Therefore, your issue must be due to your urls being incorrect or the files themselves being missing. 因此，您的问题一定是由于您的网址不正确或文件本身丢失。

This is the code from the test page: 这是来自测试页面的代码：

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

Folder layout: 文件夹布局： 在此处输入图片说明

无法使用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