jquery:fancybox缩略图助手，如何指定来源

Question

我使用的是fancyBox 2，我使用的"缩略图助手"。当我的图库中有图像时，fancyBox会自动使用目标图像作为缩略图，但当我链接到视频(在我的情况下是Vimeo)时，它不会生成缩略图。我原以为只要为fancyBox指定一个用于视频链接的图像就可以很容易地解决这个问题，但我不知道如何做到这一点。

在该网站上，http://fancyapps.com/fancybox/，它说缩略图助手有一个"源"选项，应该像这样使用它来启用缩略图，并设置源：

$(".fancybox").fancybox({
helpers:  {
thumbs : {
source : 'img/~~~.jpg'
}
}
});

但当然，这是行不通的，因为我怎么能指定哪个缩略图用于哪个目标图像或视频？我找不到任何与视频或自定义缩略图一起使用的缩略图助手的工作示例。提前感谢您的帮助。

编辑：

"源"选项被描述为"获取缩略图URL的功能"。我正在想办法使用它。我正在考虑像这样的东西

source: item.thum

其中，我在引用的每个项目中都有一个缩略图源的"thum"属性，例如

$.fancybox.open([
{href : 'image1.jpg', thum : 'thumb1.jpg'},
{href : 'image2.jpg', thum : 'thumb2.jpg'},
{href : 'image3.jpg', thum : 'thumb3.jpg'}],
{helpers : {
thumbs:{source:this.thum}
}   }
)

会是这样的吗？你明白我的意思吗？我该怎么做呢？正如你所看到的，我不是一个讲JavaScript的人。

Answer 1

我让它这样工作：我的函数找到了href元素包含字符串http://vimeo的所有项目，并用我用于视频的缩略图的url替换了整个href。

我也必须学习正则表达式，才能使它发挥作用。

$(".fancybox").fancybox({
helpers : {
thumbs : {
source: function( item ) {
return item.href.replace(/http://vimeo.*/gi, 'img/vimeo.jpg');
},
});

事实上，我的图库中的iFrame中也有一个HTML文件，我也想给它自己的缩略图，所以我的最终产品是：

$(".fancybox").fancybox({
helpers : {
thumbs : {
source: function( item ) {
return item.href.replace(/http://vimeo.*/gi, 'img/vimeo.jpg')
.replace(/.*html/gi, 'img/html.jpg');
},
});

对于任何找到这个线程并想在实践中看到这个例子的人，这里有一个链接到我使用它的网站

Answer 2

对于不同iframe(vimeo、youtube等)的不同拇指，我最终做到了这一点。或多或少你的原始计划：

$.fancybox.open([
{ 
href : 'photo.jpg',
thumb : 'photo-thumb.jpg'
}
], {
helpers : {
thumbs : {
source : function( item ) {
if (item.thumb) {
return item.thumb;
} else {
return item.href;
}
}
}
}
});

Answer 3

它应该是类似的东西

$(".fancybox").fancybox({
helpers:  {
thumbs : {
source : function ( item ) {
return "/url/to/img.ext"; //get the image url for thumbnail
}
}
}
});