使用Fancybox与图像映射/video

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

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

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

但我无法对他的post发表评论

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

HTML

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

对于youtubevideo，您需要正确的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 

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

在这里看演示