Fancybox画廊与图像地图 [英] Fancybox gallery with image map

问题描述

我正在尝试使用图像映射创建fancybox画廊. html/iframes打开，但画廊无法正常工作.

I am trying to create a fancybox gallery using image maps. The html/iframes open but I can't get the gallery working.

我尝试过:

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

并尝试:

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

但是，上一个和下一个按钮没有出现.

However, the previous and next buttons are not appearing.

以下是我的javascript:

Below is my javascript:

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

我注意到，如果手动将画廊作为一个组添加，它似乎确实可以工作，但是然后我需要做一些操作才能使画廊顺序正常工作?

I noticed it does seem to work if I manually add my gallery as a group, But then I will have to do a bit of manipulation to get the gallery order working?

$('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'
            }]
            );
    });

推荐答案

我知道这已经很老了，但也许会对某人有所帮助.

I know this is old but maybe it will help someone.

使用最新版本的fancybox，您可以修改"groupAttr"选项:

With the latest version of fancybox, you can modify the "groupAttr" option :

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

将alt用作rel而不是rel，这适用于图像地图.

Use alt as a "grouper" instead of rel, this works for image maps.

干杯.

这篇关于Fancybox画廊与图像地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！