3

私はfancyBox2を使用しており、「サムネイルヘルパー」を使用しています。ギャラリーに画像がある場合、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

それは次のようなものでなければなりません

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

私はそれを次のように機能させました：私の関数は、href要素に文字列が含まれているすべてのアイテムを検出し、それら全体をビデオに使用しているサムネイル画像のURLにhttp://vimeo置き換えました。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');
    },
});

このスレッドを見つけて、実際にこの例を見たい人のために、ここに私がそれを使用したサイトへのリンクがあります。

于 2012-09-23T14:34:16.333 に答える