How to open fancybox using map link

Question

The link was given to a jpg file using map.

<map name="Map" id="Map">
<area shape="rect" coords="350,350,350,350" href="......" target="_new" />
</map>

how can i open fancybox using that link?

Answer 1

Simply use this script

$(document).ready(function(){
 $("#Map area").fancybox({
  // API options here
 }); // fancybox
});//ready

Make sure you add the right API options for the version you are using (if your href targets an image, you may not need any)

If using v1.3.4 check http://fancybox.net/api.

For v2.x check http://fancyapps.com/fancybox/#docs

Answer 2

$('#Map area').click(function(e){     // On click of <area> tag
    var href = $(this).attr('href'); // Get the href param 
    $.fancybox({                     // Open fancybox
        'href'   : href,
        'width'  : 350,
        'height' : 'auto'
    });

    e.preventDefault();
});