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”选项：

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

使用alt作为“石斑鱼”代替rel，这适用于图像地图。

干杯。

Fancybox画廊与图像映射

2 个答案: