Использование Fancybox с картой изображения / видео

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>

См. Демонстрацию здесь