Question

我在我的网站上使用此脚本https://stackoverflow.com/a/8855410/1055987，但我想编辑这个，我不知道如何。我想脚本从数据库中获取图像我不想写任何这样的，有可能吗？正常的fancybox只是添加了rel =“group”，但它没有用。请问您有什么解决方案吗？

[
{href:'images/01.jpg', title: '01'},
{href:'images/02.jpg', title: '02'},
{href:'images/03.jpg', title: '03'}
]

Answer 1

如果你已经通过ajax调用了你的图像集，那么它就会返回

{href:'images/01.jpg', title: '01'},
{href:'images/02.jpg', title: '02'},
{href:'images/03.jpg', title: '03'}

...并且假设您有一系列缩略图，每个缩略图对应于ajax调用中的每个图像，如

<div class="thumbs">
    <img src="images/01_thumb.jpg" alt="" />
    <img src="images/02_thumb.jpg" alt="" />
    <img src="images/03_thumb.jpg" alt="" />
</div>

... 通知我将缩略图包裹在div class="thumbs"中......然后你需要抓住点击的拇指（{{1}然后打开fancybox从相应的图像开始，这样就可以了

index

... 通知我在

中使用

$('.thumbs img').click(function () {
    var startWith = $(".thumbs img").index(this)
    $.fancybox(myAjaxCall, {
        type: "image",
        index: startWith
    }); // fancybox
}); // click

方法点击了拇指

index()

...并使用API选项var startWith = $(".thumbs img").index(this);告诉fancybox启动图库的图像。

参见 JSFIDDLE

Fancybox iframe编辑

1 个答案: