jquery：fancybox 缩略图助手，如何指定来源？答案

【问题标题】：jquery: fancybox thumbnail helper, how to specify source?jquery：fancybox 缩略图助手，如何指定来源？
【发布时间】：2012-09-09 05:33:42
【问题描述】：

我正在使用 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 的演讲者。

【问题讨论】：

标签： jquery fancybox thumbnails helper

【解决方案1】：

对于不同 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;
          }
        }
      }
    }
});

【讨论】：

【解决方案2】：

应该是这样的

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

【讨论】：

谢谢！这几乎是我所需要的。

【解决方案3】：

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

我也必须学习正则表达式才能使其正常工作。

$(".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');
    },
});

对于找到此线程并希望在实践中查看此示例的任何人，here is a link 到我使用它的站点。

【讨论】：