Question

我试图映射图像。因此，当点击地图区域时，它会打开一个管视频，我发现这个很好的例子，但是我无法使用你的管视频。

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

请注意我找到了这个示例http://jsfiddle.net/ffZ7B/4/ 来自另一个堆栈流成员：Scoobler

但我无法评论他的帖子

我正在使用 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
});

}）;

Answer 1

对于youtube视频，您需要正确的Fancybox（v1.3.x）脚本，因此根据上面的jsfiddle示例调整代码，如：

$(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

当然，您需要在href代码中设置正确的area shape

<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与图像映射/视频

1 个答案: