イメージマップを使用したFancyboxギャラリー

Question

イメージマップを使用してfancyboxギャラリーを作成しようとしています。 html/iframesが開いていますが、ギャラリーを稼働させることができません。

私が試した：

<area class="fancybox" data-fancybox-group="gallery" 

とも試みた：

<area class="fancybox" rel="gallery" 

しかし、前回と次のボタンが表示されません。

以下

は私のjavascriptです：

$('map > area.fancybox').click(function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     $.fancybox({ 
      'href' : url, 
     'type' : 'iframe' 
      }); 
    }); 

私は手動でグループとしての私のギャラリーを追加した場合、動作するようには思えない気づいた、しかし、私はギャラリー注文作業を取得するための操作のビットを行う必要があります？

$('map > area.fancybox').click(function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     console.log($(this).attr('rel')); 
     $.fancybox([{ 
      'href' : url, 
      'type' : 'iframe' 
      }, 
      { 
      'href' : 'class.cfm', 
      'type' : 'iframe' 
      }, 
      { 
      'href' : 'explore.cfm', 
      'type' : 'iframe' 
      }] 
      ); 
    }); 

Answer 1

これを試してみてください。

$(document).ready(function(){ 
    $('map').find('area.fancybox').click(function() 
    { 
     var self = this; 
     if($(self).attr('href') != undefined || $(self).attr('href').length > 1) 
     { 
      $.fancybox({ 
       href : $(self).attr('href'), 
       type : 'iframe' 
      }); 
     } 
     else 
     { 
      console.log('Ups!!'); 
     } 
     return false; 
    }); 
}); 

さようならを！

Answer 2

私はこれが古いことを知っていますが、おそらく誰かを助けるでしょう。 fancyboxの最新バージョンで

、あなたは「groupAttr」オプション変更することができます。代わりにRELの「ハタ」として

$("#img_map area").fancybox({ 
    groupAttr : "alt" 
}); 

使用ALTを、これはイメージマップのために動作します。

乾杯。