Fatal编程技术网
  • javascript/
  • Javascript Can'；t使用html/php使fancybox函数无法工作

Javascript Can'；t使用html/php使fancybox函数无法工作

javascript php jquery html

Javascript Can'；t使用html/php使fancybox函数无法工作,javascript,php,jquery,html,fancybox,Javascript,Php,Jquery,Html,Fancybox,我一次又一次地寻找答案，但我似乎找不出这个答案。我想简单地使用fancybox来显示图像 这是我第一次使用fancybox，所以可能有经验的人会在几秒钟内注意到这个问题 我已经遵循了在上给出的步骤 这是我在head.php文件中的代码： <!-- Add jQuery library --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></s

我一次又一次地寻找答案，但我似乎找不出这个答案。我想简单地使用fancybox来显示图像

这是我第一次使用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>';

echo'；
加载此页面后，我有以下代码（也是从给定网站复制的）：


$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox（）；
});

但是，当我单击此图像时，它不会在fancybox中打开，而是在一个新选项卡中打开，而只是显示图像，没有任何花哨的样式

提前谢谢你的帮助

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

。正如你所看到的，它确实有效。因此，您的问题一定是由于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>


无标题文件
$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox（）；
});
文件夹布局：

您确定所有文件都在您指向的位置吗？在控制台中，是否有任何警告？此
/fancybox/
表示您已在根级别创建（并将fancybox文件放置在）此文件夹。确保这是正确的谢谢你的反应。。抱歉，迟了答复；）。是的，我指的是正确的方向。我现在发现我有一个错误，我将以图片的形式发布该错误，作为对下面Gleasted0d答案的回复。感谢您的帮助，很抱歉回复太晚。学习的最后期限让我两个星期都很痛苦；）。我只是查了一下，但找不到哪里出错了。。我会再次检查每个文件，如果我再也找不到问题，我会发布一些关于文件夹布局等的详细信息。再次感谢！我想我所有的代码都是对的。我不熟悉控制台中的错误，现在是：）。我发现我有一个错误：我现在在火车上，网络连接有问题，所以我希望上传能起作用。我没有时间去弄清楚这个错误到底意味着什么，但我会在有时间的时候尝试。再次感谢您的帮助：）。我已解决此问题。我甚至不知道为什么，但在我的页脚，有一行：我删除了那行，fancybox工作得很好。我不知道这为什么奏效，但它奏效了。如果有人能向我解释，为什么这会有帮助，那将是令人惊讶的。谢谢你的努力@Kenny看起来您加载了两次jQuery，这导致了冲突。 
<!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>