Using Fancybox with Image map /Video

问题

I'm trying to map an image. so when the map-area is click, it will open a you tube video I found this great example but i can't get to work with a you-tube video.

any help will be appreciated since im doing this for a non profit organisation thank you

Note I found this example http://jsfiddle.net/ffZ7B/4/ from another stack flow member:Scoobler

but i can't comment on his post

I'm using query.fancybox-1.3.4.js

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:

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

});

回答1:

For youtube videos, you need the right Fancybox (v1.3.x) script so based on the jsfiddle example above tweak the code like:

$(document).ready(function() {
 $('map > area.fancybox').click(function(e) {
  $.fancybox({
   'padding'        : 0,
   'autoScale' : false,
   'transitionIn' : 'none',
   'transitionOut' : 'none',
   'title' : this.title,
   'width' : 640,
   'height' : 390,
   'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
   'type' : 'swf',
   'swf' : {
     'wmode' : 'transparent',
     'allowfullscreen' : 'true'
   }
  }); // fancybox
  return false;
 }); // click
}); //  ready

Of course, you need to set the proper href in your area shape code like

<map name="Map" id="Map">
 <area class="fancybox" shape="poly" coords="0,0,0,328,145,328" href="http://www.youtube.com/watch?v=3l8MwU0IjMI&autoplay=1" title="barred owl spotted on a school playground " />
 <area class="fancybox" shape="poly" coords="0,0,180,0,328,328,142,328" href="http://www.youtube.com/watch?v=zYaFXvcnIko&autoplay=1" title="Screaming ride in California Adventure"/>        
 <area class="fancybox" shape="poly" coords="328,328,328,0,180,0" href="http://www.youtube.com/watch?v=SEBLt6Kd9EY&autoplay=1" title="Ducks blown off their feet by the wind" />
</map>

See demo here

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

标签

jquery

html

fancybox