1

私が欲しいのは、クリックするとギャラリーが開く画像です。FancyBoxを使っていますが、Thumbnail Helper(イメージマップ付き)が欲しいです

次のようなものです: http://jsfiddle.net/ffZ7B/343/ 左のホイールをクリックすると、ギャラリーが開きますが、サムネイルは表示されません。

私はこれを試しました：http://jsfiddle.net/ffZ7B/344/

誰もこれを行う方法を知っていますか?

ありがとうございました！

4

1 に答える 1

1

これThumbnail Helperは fancybox v2.x のまったく新しい機能であり、以前のバージョンには存在しませんでした。あなたはjsfiddleでfancybox v1.3.4を使用しています。

を使用する場合は、 Fancybox v2.xThumbnail Helperにアップグレードしてから、次のコードを使用する必要があります。

HTML :

<img src="images/imageMap.jpg" usemap="#map" />

<map name="map" id="map">
 <area class="fancybox" href="images/01.jpg" data-fancybox-group="gallery" shape="rect" coords="46,38,201,154" title="01"  />
 <area class="fancybox" href="images/02.jpg" data-fancybox-group="gallery" shape="rect" coords="295,35,388,83" title="02"  />
 <area class="fancybox" href="images/03.jpg" data-fancybox-group="gallery" shape="rect" coords="27,166,134,293" title="03" />
</map>

JS:

$(document).ready(function() {
 $("area.fancybox").fancybox({
  helpers: {
   thumbs   : {
    width   : 50,
    height  : 50
   }
  }
 }); // fancybox
}); // ready

data-fancybox-group="gallery"ギャラリー要素を設定するために属性を使用したことに注意してください (タグは v1.3.4 で機能していたため、機能しません)。ただし、検証目的で HTML5 を設定する必要がある場合がありrelます。areaDOCTYPE

更新:ここで動作するデモを参照してください-注(2013 年 1 月 15 日) は jQuery v1.9.0 を使用しているため、このデモは失敗します。詳細については、これを確認してください。ただし、jQuery v1.8.3 で動作するデモを再現できます。

于 2012-07-02T19:37:24.297 に答える