Using Fancybox with Image map

问题

I wonder if there is a way to use the fancybox with Image maps?

    <img src="\path\" usemap="#Map">
    <map name="Map" id="Map" >
      <area shape="poly" coords="0,0,0,328,145,328" href="#" />
      <area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" />        
      <area shape="poly" coords="328,328,328,0,180,0" href="#" />    
    </map>

回答1:

So you want to show a single image in a fancybox with an image map?

It is possible to add the map to the image of fancybox in a couple of ways,

For example, you could add it to an image once its loaded, the image will load with the id fancybox-img, so using the oncomplete() callback we can have access to add the map to the image:

HTML:

<a href="/path/to/large/image" class="fancybox" title="Single image with a map">
    <img src="/path/to/small/image"/>
</a>
<map name="Map" id="Map">
    <area shape="poly" coords="0,0,0,328,145,328" href="#" />
    <area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" />        
    <area shape="poly" coords="328,328,328,0,180,0" href="#" />    
</map>

jQuery:

$("a.fancybox").fancybox({
    'titleShow': true,
    'titlePosition': 'inside',
    onComplete: function() {
        $('#fancybox-img').attr('usemap', '#Map');
    }
});

See it working here

The other way is to pass content to the fancybox:

HTML:

<img src="/path/to/small/image" />
<map name="Map" id="Map">
   <area shape="poly" coords="0,0,0,328,145,328" href="#" />
   <area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" />        
   <area shape="poly" coords="328,328,328,0,180,0" href="#" />    
</map>

jQuery:

$("img").click(function() {
    var url = $(this).attr('src');
    var content = '<img src="'+url+'" usemap="#Map" />';
    $.fancybox({
        'title'   : 'Single image with a map',
        'titlePosition': 'inside',
        'content' : content
    });
});

See it working here

The above could be improved to support multiple images and maps by doing something like this:

HTML:

<img src="/path/to/small/image" rel="#Map" title="Single image with a map 1" class="fancybox" />
<br />
<img src="/path/to/second/small/image" rel="#Map"  title="Single image with a map 2" class="fancybox" />
<br />
<img src="/path/to/non/fancybox/image" />
<br/>
Try clicking image to enlarge....
<map name="Map" id="Map">
    <area shape="poly" coords="0,0,0,328,145,328" href="#" />
    <area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" />        
    <area shape="poly" coords="328,328,328,0,180,0" href="#" />    
</map>

jQuery:

$("img.fancybox").click(function() {
    var url = $(this).attr('src');
    var map = $(this).attr('rel');
    var title = $(this).attr('title'); 
    var content = '<img src="' + url + '" usemap="'+ map + '" />';
    $.fancybox({
        'title': title,
        'titlePosition': 'inside',
        'content': content
    });
});

See it working here

NOTE: I have added a couple of options to the fancybox, like the title just to show how you can add the options. I also caught the click on the map so it didn't open the url and alerts just to show you the map is working.

Update as per the comments:

Ahh, I misunderstood. In that case, it is quite simple to use a fancybox when a user clicks on a map item. The simplest, is to use the jQuery selector $('map > area') to catch any click on an area of a map. However, if you didn't want ALL area's to open in a fancybox, it might be better to add to your selector, for example give each area that you want to open a fancybox a class, then use the selector $('map > area.fancybox'):

HTML:

<img src="/path/to/image" usemap="#Map" />
<br />
Try clicking image map.....
<map name="Map" id="Map">
    <area shape="poly" coords="0,0,0,328,145,328" href="http://www.google.com" class="fancybox" title="Google" rel="iframe" />
    <area shape="poly" coords="0,0,180,0,328,328,142,328" href="http://farm6.static.flickr.com/5177/5574889454_b0a8c7845b.jpg" class="fancybox" title="EBR 1190 Typhon hits the track" rel="image" />        
    <area shape="poly" coords="328,328,328,0,180,0" href="http://www.ask.com" />
</map>

jQuery:

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

See the example here

So in the example above, we use the jQuery .click() to catch any clicks on a map area with the class fancybox (you will notice the www.ask.com example will open in the window, the other two open in a fancybox).
We use the .preventDefault() method to stop the browser following the link like it normally would.
Next get the url of the area clicked on.
Then get the title of the area clicked on (not really needed, but just added to try and help show how you can get data)
Next I set the type using the rel attribute, this allows you to set what you want the fancybox to do.
Now simply open the fancybox with the details.

So in this example:

Area 1 will open a fancybox which is an iframe containing a page.

Area 2 will open a fancybox with an image in it.

Area 3 will just load the website in the link as normal not using fancybox.

来源：https://stackoverflow.com/questions/5530871/using-fancybox-with-image-map

标签

jquery