0

我已经坐了好几天了，浏览博客、代码、论坛任何可以帮助我解决问题的东西。

我想做的是在页面上显示带有信息摘要的thum 图像，单击时会在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并想购买许可证，但如果它不起作用，购买它就没有意义！这绝对是疯了。

希望有人可以帮助我。

4

2 回答 2

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

于 2013-07-17T23:50:14.160 回答
0

我很确定该行$.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>
于 2013-07-17T07:25:50.027 回答