3

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

4

3 回答 3

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;
          }
        }
      }
    }
});
于 2013-07-03T09:26:44.843 回答
0

我让它像这样工作：我的函数找到了href元素包含 string的所有项目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');
    },
});

对于找到此线程并希望在实践中查看此示例的任何人，这里是指向我使用它的站点的链接。

于 2012-09-23T14:34:16.333 回答
0

它应该是这样的

$(".fancybox").fancybox({
    helpers:  {
        thumbs : {
          source : function ( item ) {
            return "/url/to/img.ext"; //get the image url for thumbnail
          }
        }
    }
});
于 2012-09-23T06:20:36.337 回答