4

作業中のプロジェクトに「添付ファイル」コンテナがあり、特定のイベントに添付されたファイルのサムネイル画像が表示されます。ユーザーがサムネイルをクリックすると、ファンシーボックスウィンドウが開き、添付された画像またはテキストファイルの拡大プレビューが表示されます。

今のところ、私のソリューションは、次のようにfancyboxタイプをiframeに設定することで構成されています。

$(".fancybox_group").fancybox({
    type : 'iframe'
});

これにより、テキストファイルと画像の両方が正常に表示されますが、画像の周囲にはこの巨大な白い境界線があります。私はグーグルでいくつか検索してこの解決策を見つけましたが、それは私にはうまくいきません。これは単に2つの別々のfancyboxインスタンスを作成します。1つは画像用、もう1つはiframe用です。1つのギャラリーですべての添付ファイルをスクロールできるようにしたいと思います。これは可能ですか？

これは、私が達成しようとしていることを示すjsfiddleの例です。fancyboxの例からコード/画像を借用し、テキストドキュメントに別のサムネイルリンクを追加しました。これが私のプロジェクトでの設定方法です。任意の洞察をいただければ幸いです。

4

1 に答える 1

5

fancybox v2.0.6を使用しているため、他のソリューションは廃止されている可能性があります。

目的を達成するのは簡単です。次のようにします。

1）。すべてのjavascriptファイルを次の順序でロードします。

  • jQuery
  • Fancyboxjsファイル
  • Fancyboxメディアjsファイル（これはヘルパーディレクトリ内にあります）

2）。fancyboxcssファイルをロードします

3）。html次のように、fancyboxで開きたいオブジェクトのタイプごとにを設定します。

画像：

<a class="fancybox" data-fancybox-group="gallery" href="image01.jpg"><img src="image01thumb.jpg" alt="" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="image02.jpg"><img src="image02thumb.jpg" alt="" /></a>

href画像のがfancyboxのようなものである場合、拡張子（jpg、png、gif）がないため、href='/attachments/76'それが原因であることがわかりません。image次のようにクラスをHTMLに追加fancybox.imageします。

<a class="fancybox fancybox.image" data-fancybox-group="gallery" href="/attachments/76"><img src="thumb76.jpg" alt="" /></a>

Ajaxコンテンツ（htmlまたはtxtファイル）：

<a class="fancybox fancybox.ajax" data-fancybox-group="gallery" href="sample.html">open ajax 1</a>
<a class="fancybox fancybox.ajax" data-fancybox-group="gallery" href="sample.txt">open ajax 2</a>

（2番目のクラスに注意してfancybox.ajaxください...また、私の例ではテキストの代わりにサムネイルを使用できます）

iframe経由の外部ページ：

<a class="fancybox fancybox.iframe" data-fancybox-group="gallery" href="http://domain.com/page.html">open page in iframe mode</a>
<a class="fancybox fancybox.iframe" data-fancybox-group="gallery" href="http://other.com/page2.html">open other page in iframe mode</a>

（2番目のクラスに注意してくださいfancybox.iframe）

ユーチューブの動画 ：

<a class="fancybox" data-fancybox-group="gallery" href="http://www.youtube.com/watch?v=2matH4B9bTo">open youtube video</a>

（fancyboxメディアヘルパーを使用しているため、クラスを追加する必要がないことに注意してください）

注：data-fancybox-group="gallery"同じギャラリー内のすべての要素を設定するために属性を使用しています（DOCTYPEただし、HTML5を設定する必要があります）

最後に、次のスクリプトを使用するだけです。

$(".fancybox").fancybox();

次のような他のAPIオプションを追加することをお勧めします。

$(".fancybox").fancybox({
  // other API options
  padding: 0 // optional etc.
});

buttonsまたはヘルパーをさらに使用したい場合はthumbnails、適切なjsファイルとcssファイルをロードすることを忘れないでください。また、次のhelpersようなオプションをスクリプトに追加します。

$(".fancybox").fancybox(
 helpers : {
  buttons : {},
  thumbs : {
   width : 50,
   height : 50
  }
 }
});

最後の注意：これはfancyboxv2.0.6+です

于 2012-06-20T19:04:01.887 に答える