使用Fancybox和图像地图/视频 [英] Using Fancybox with Image map /Video

问题描述

我试图映射图像。所以当地图区域被点击时，它会打开一个你管状的视频，我发现这个很好的例子，但我不能与你的管视频。

任何帮助将不胜感激，因为即时通讯为非营利组织做这件事谢谢你

注意
我发现这个
示例 http://jsfiddle.net/ffZ7B/4/
从另一个堆栈流成员：Scoobler

但我无法对他的帖子发表评论

我正在使用
query.fancybox-1.3.4 .js

HTML

 < img src =/ path / to / small / image/> 
< map name =Mapid =Map> 
< area shape =polycoords =0,0,0,328,145,328href =＃/> 
< area shape =polycoords =0,0,180,0,328,328,142,328href =＃/> 
< area shape =polycoords =328,328,328,0,180,0href =＃/> 
< / map> 
  

jQuery：

 <点击（函数（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 
}）; 
  

}）;

解决方案对于youtube视频，您需要正确的Fancybox（v1.3.x）脚本，以便根据上面的jsfiddle示例调整代码，如下所示：

<$ p $点击（功能（e）{
$ .fancybox（））（$ b $> $（$） {
'padding'：0，
'autoScale'：false，
'transitionIn'：'none'，
'transitionOut'：'none'，
' title'：this.title，
'width'：640，
'he ight'：390，
'href'：this.href.replace（new RegExp（watch\\？v =，i），'v /'），
'type '：'swf'，
'swf'：{
'wmode'：'transparent'，
'allowfullscreen'：'true'
}
}）; // fancybox
return false;
}）; //点击
}）; //准备好

当然，您需要设置正确的 href 区域形状中添加code>代码，如




 < map name =Mapid =Map> 
< area class =fancyboxshape =polycoords =0,0,0,328,145,328href =http://www.youtube.com/watch?v=3l8MwU0IjMI&autoplay=1title =在学校操场上发现的禁止猫头鹰/> 
< area class =fancyboxshape =polycoords =0,0,180,0,328,328,142,328href =http://www.youtube.com/watch?v=zYaFXvcnIko&autoplay=1title =尖叫骑在加利福尼亚冒险/> 
< area class =fancyboxshape =polycoords =328,328,328,0,180,0href =http://www.youtube.com/watch?v=SEBLt6Kd9EY&autoplay=1title =鸭子被风吹掉/> 
< / map> 
  

在此处查看演示

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
});

});

解决方案

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

这篇关于使用Fancybox和图像地图/视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！