使用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和圖像映射/視頻

回答

相關問題