Галерея 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

Я знаю, что это старо, но, возможно, это кому-нибудь поможет.

В последней версии fancybox вы можете изменить параметр "groupAttr":

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

Используйте alt в качестве "группировщика" вместо rel, это работает для карт изображений.

Приветствие.

Answer 2

попробуйте это:

$(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!