Fancybox gallery with image map

问题

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

I tried:

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

and also tried:

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

However, the previous and next buttons are not appearing.

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

回答1:

try this:

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

Bye!

回答2:

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

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

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

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

Cheers.

来源：https://stackoverflow.com/questions/8730235/fancybox-gallery-with-image-map

标签

jquery

fancybox