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

<p>I tried:</p>

<pre><code>&lt;area class="fancybox" data-fancybox-group="gallery"
</code></pre>

<p>and also tried:</p>

<pre><code>&lt;area class="fancybox" rel="gallery"
</code></pre>

<p>However, the previous and next buttons are not appearing.</p>

<p>Below is my javascript:</p>

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

<p>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?</p>

<pre><code>$('map &gt; 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'
            }]
            );
    });
</code></pre>
