使用Fancybox和图像映射/视频

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

任何帮助会因为即时通讯这样一个非盈利性组织，可以理解谢谢

注我发现这个例如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 
});

}）;

来源

2012-02-17 yoyojonathan

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

来源

2012-02-17 21:20:53 JFK

非常感谢exacly什么，我需要它再次谢谢 – yoyojonathan 2012-02-18 00:52:06

不要忘了标记这是正确的答案，然后，谢谢;） – JFK 2012-02-18 01:45:08

只是一件事，无论如何，我可以这与YouTube的一个html5视频 – yoyojonathan 2012-02-20 15:49:53

使用Fancybox和图像映射/视频

回答

相关问题