Fancybox画廊与图像映射

我正在尝试使用图像映射创建一个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 ”选项：

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

使用alt作为“石斑鱼”而不是rel，这适用于图像映射。

干杯。