0

4つの画像マップに分割された画像でFancyBoxを使用しようとしています。私はこの投稿を見つけました：画像マップでFancyboxを使用し、使用されたリソースとjsを複製しましたが、私のものは実行したくないようです...？助けてください！

HTML：

<img src="http://www.acquafibrausa.com/images/caps_top.png" usemap="#Map">
    <map name="Map" id="Map">
       <area shape="rect" coords="43,91,177,141" href="http://www.acquafibrausa.com/images/nutrition_lime.png"
class="fancybox" alt="Click to view Lime nutrition facts" rel="image" />
       <area shape="rect" coords="264,92,399,142" href="http://www.acquafibrausa.com/images/nutrition_orange.png"
class="fancybox" alt="Click to view Orange nutrition facts" rel="image"
/>
       <area shape="rect" coords="488,92,622,143" href="http://www.acquafibrausa.com/images/nutrition_strawberry.png"
class="fancybox" alt="Click to view Strawberry nutrition facts" rel="image"
/>
       <area shape="rect" coords="711,90,846,142" href="http://www.acquafibrausa.com/images/nutrition_peach.png"
class="fancybox" alt="Click to view Peach nutrition facts" rel="image"
/>
    </map>

JQUERY /ヘッドコンテンツ：

<link href="main_style.css" rel="stylesheet" type="text/css">
<link href="/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<script type="text/javascript">
   $('map > area.fancybox').click(function(e) {
   e.preventDefault();
   var url = $(this).attr('href');
   var title = $(this).attr('title');
   var type = $(this).attr('rel');
   $.fancybox({
      'title': title,
      'titlePosition': 'inside',
      'href' : url,
      'type' : type
   });
});
</script>

こちらをご覧ください。

jsfiddleには上記の例があります。

4

3 に答える 3

1

jQueryを含めていません。あなたのフィドルでそれをするために、ページの右側であなたを見てください。実際のページでそれを行うには、ここを見てください。最も簡単な方法は、CDNでjQueryを使用することです。

jQuery 1.8.3以下でのみ動作するようです（jsFiddleで利用可能なデフォルトバージョンを試しました）。

そして、あなたはあなたの画像タグを閉じていません。

于 2013-01-28T17:59:53.923 に答える
0

私にとっては、完全な URL パス (つまり で始まるhttp://)を使用すると、スクリプトが読み込まれません。

相対パスを使用して画像を読み込んでみてください:href="images/image.jpg"

于 2013-07-20T18:19:31.690 に答える
0

ファンシーボックスをイメージマップから開きたいだけの場合（ここでも回答https://stackoverflow.com/a/11418310/1055987area ）、次のいずれかを実行して、タグをファンシーボックスにバインドするだけです。

$("#Map area").fancybox();

...areaタグにクラスがない場合、または:

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

...areaタグにclass="fancybox".

JSFIDDLEを参照してください....

フィドルに関しては、次のリンクを使用して jQuery にリンクしていました: http://ajax.googleapis.com/ajax/libs/jquery/1.3.4/jquery.min.jsしかし、404 エラーが返されます。実際、jQuery の v1.3.4 は存在しなかったようです ;) ... http://code.jquery.com/で jQuery の以前のバージョンを確認できます。

于 2013-01-28T20:18:36.280 に答える