jquery - Fancybox 不同的外观

Question

请查看下面的链接并单击每个项目。
http://seerman.ir/index.php?page=products&cat=tableau&sid=43
一旦你点击一个新的缩略图，Fancybox 就可以正常工作，直到它想要显示图片。出现图片时，包装盒移动到底部。但是当你想在点击后再次看到相同的项目时，一切都会正确显示。我怎么解决这个问题 ？

Answer 1

我建议您在您的网站上修复一些问题：

1）。使用 jQuery 的单个实例。目前您正在加载版本 1.8.0 和 1.7.0

2）。当它们在同一页面中应该是唯一的时，您有多个重复的 ID，因此请更改您的链接

<a id="example1" href=pages/details.php?cat=tableau&id=35&code=1123>...

进入这个

<a class="example1" href="pages/details.php?cat=tableau&id=35&code=1123">...

请注意，我还将缺少的引号添加到href=" "

3）。fancybox 不知道您正在打开图像，因为您的链接 ( href) 的格式，所以它从初始内容计算框的位置，然后从该位置呈现图像，所以改变这个

j("a#example1").fancybox();

进入这个

j("a.example1").fancybox({
    type: "image",
    onComplete: function () {
        var repos = setTimeout(function () {
            $.fancybox.center();
        }, 1000)
    }
});

查看常见问题解答No.6 了解更多信息。

请注意，我将选择器的前缀从#into更改为.因为我们现在使用类

编辑：由于您的 php 文件在图像之前返回一些数据，fancybox 顶部位置是根据数据计算的。您可能希望$.fancybox.center()在显示图像后运行该方法。使用 settimeout 给它几秒钟加载