将自定义数据传递到 FancyBox 图像库答案

【问题标题】：Pass custom data to FancyBox image gallery将自定义数据传递到 FancyBox 图像库
【发布时间】：2011-11-01 07:37:00
【问题描述】：

我正在使用 FancyBox 创建一个标准图片库。该页面显示缩略图列表，这些缩略图链接到 FancyBox 中出现的更大版本。我想将另一个 URL 传递给 FancyBox，这样它就会显示一个指向该图像的完整版本的链接。

我可以看到一种方法是将额外的内容添加到链接的标题属性并在 titleFormat 函数中解析出来。但是，这会破坏缩略图中的工具提示。

有没有其他方法可以将我需要的额外数据传递给 FancyBox？提醒一下，有没有办法访问 FancyBox 中显示的图像的 URL，我可以从中推断出完整分辨率图像的 URL？

谢谢。

【问题讨论】：

标签： javascript jquery fancybox

【解决方案1】：

在这种情况下，我能够从预览中推断出全尺寸图像的 URL。 titleFormat 函数的 currentArray 和 currentIndex 参数给了我我所需要的。

function doFancyBox() {
    $('a[rel=imageGroup]').fancybox({
        'titlePosition': 'inside',
        'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
            return "<span class=\"Title\">" + title + "&nbsp;&nbsp;:&nbsp;&nbsp;<a href=\"" + inferFullSizeFromUrl(currentArray[currentIndex]) + "\">Full Size Image</a></span>";
        }
    });
}

function inferFullSizeFromUrl(url) {
    var str = url.toString();
    return url.replace(/_preview/i, "");
}

【讨论】：

【解决方案2】：

您可以添加自己的内容，如$('#fancybox_div').fancybox('<img src="1.jpg" />') 等

【讨论】：

所以我需要为页面上的每个缩略图调用fancybox函数吗？它还会将图像与下一个/后退按钮连接起来吗？
您可以在.fancybox() 方法中传递一批标签，因为我记得它不应该破坏下一个/后退导航
我正在尝试这个代码：function doFancyBox() { $('a[rel=imageGroup]').fancybox('<p>Hello</p>', { 'titlePosition': 'inside', 'titleFormat': function (title, currentArray, currentIndex, currentOpts) { return "<span class=\"Title\">" + title + "</span>"; } }); 但它没有用。它只是使用默认设置显示图像。但是，我想出了如何使用标题格式函数推断全尺寸图像的 url。看我的回答。