Question

我已经坐了几天，通过博客，代码，论坛来帮助我解决问题。

我要做的是在页面上显示一个包含信息摘要的图像，点击一个更大的图像会在fancybox中打开。

但是我有一个mysql数据库中的所有图像和一个调用它们的php页面，这里是我正在使用的代码和脚本。

<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

<script type="text/javascript">
$(document).ready(function() {
$.fancybox({ href: "/images/big_pic.php?id=905", type: "image"})
});
</script>

<a class="fancybox" rel="group" href="/images/big_pic.php?id=905"><img src="h/images/small_pic.php?id=905" alt="" /></a>

我有拇指显示，并在页面刷新它进入fancybox，但点击进入/images/big_pic.php?id=905。

我想在几个网站上使用fancybox并想购买许可证，但是如果它不起作用就没有意义购买它！绝对坚持这一点。

希望有人可以帮助我。

Answer 1

1）。你需要至少有这个jQuery代码：

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

2）。如果您还希望链接在页面加载时显示fancybox，则只需在同一个选择器上trigger click，如：

<script type="text/javascript">
 $(document).ready(function () {
     $(".fancybox").fancybox({
         type: "image"
     }).trigger("click"); // <-- show fancybox on page load. Then after every click on the link
 });
</script>

...您将获得所需的双重功能。

3）。另一方面，如果您有一个图库，并且您在页面加载时触发它，请使用方法.eq()以确保将触发图库的第一个元素，如

<script type="text/javascript">
 $(document).ready(function () {
     $(".fancybox").fancybox({
         type: "image"
     }).eq(0).trigger("click"); // <-- show fancybox on page load starting from the first element
 });
</script>

参见 JSFIDDLE

Answer 2

我非常确定第$.fancybox({...行会在加载时触发灯箱，但您实际上还没有创建特定链接“灯箱”链接。将下面指出的额外行添加到JS部分以解决此问题。

<script type="text/javascript">
$(document).ready(function() {
$.fancybox({ href: "/images/big_pic.php?id=905", type: "image"});
$(".fancybox").fancybox(); // <--- this line should do the trick
});
</script>

fancybox在刷新时打开而不是单击

2 个答案: