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

对于不同的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 2

应该是

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

Answer 3

我使它的工作方式如下：我的函数找到了href元素包含字符串http://vimeo的所有项目，并用缩略图的网址替换了整个href s我是用于视频。

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

$(".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到我使用它的网站。

jquery：fancybox thumbnail帮助器，如何指定源码？

3 个答案: