jquery - Fancybox iframe 编辑

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"，然后您需要捕捉单击的拇指（the index）并从相应的图像开始打开fancybox，这样您就可以做到

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

...请注意，我使用中的index()方法点击了拇指

var startWith = $(".thumbs img").index(this);

...并使用 API 选项index告诉fancybox 使用什么图像来启动图库。

见JSFIDDLE