Использование fancybox для открытия галереи, содержащей встроенные видео на YouTube

Question

Мне нужно иметь ссылку на мою веб-страницу с надписью «видео», и при ее нажатии открывается галерея fancybox, в которой отображается первое из 1 или более видео.У кого-нибудь есть пример как это сделать?

В этом сообщении stackoverflow четко объясняется, как открыть окно с одним видео с YouTube.Я бы хотел открыть галерею с кнопками «Далее» и «Назад» для навигации между видео.

Вот некоторый код, который я должен открыть, например, в одном div с помощью iFrame.Очевидно, мне нужно обновить «id» элемента div, содержащего видео, чтобы использовать «class», чтобы у меня были кратные значения.Но я не понимаю, как изменить href, чтобы потом знать, что загружать.Изменение его на «.myVid» не работает.

$("a#myTest").fancybox({
     'transitionIn': 'elastic',
     'transitionOut': 'elastic',
     'speedIn': 600,
     'speedOut': 200,
     'overlayShow': false,
    'type': 'inline'

});

<a id="myTest" href="#myVid" rel="group1">display video gallery</a>

<div style="display:none">
<div id="myVid" rel="group1" style="height: 400px;" ><iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/9QrFa3tDwvY" frameborder="0" allowfullscreen="true"></iframe></div></div>

Это пример формы сайта Fancybox, показывающий, как группировать элементы с помощью атрибута rel,Но их пример показывает только, как сгруппировать вещи, которые уже видны на странице, и где ссылка для запуска слайд-шоу является одним из элементов в слайд-шоу.Я хочу отдельную ссылку для запуска моей.

$("a.grouped_elements").fancybox();


<a class="grouped_elements" rel="group1" href="Image1.jpg"><img src="Image1.jpg" height="20" width="20" alt=""/></a>  
<a class="grouped_elements" rel="group1" href="Image2.jpg"><img src="Image2.jpg" height="20" width="20" alt=""/></a> 

А вот еще один пример, который «почти» работает.Хотя проблема в том, что первый элемент в галерее, который он хочет открыть, является пустым ... так как это элемент гиперссылки, которая открыла галерею.

<a class="video_elements" rel="shadowbox">launch videos</a>

<div style="display:none">
<a href="http://www.youtube.com/v/znyMx58fZqQ" class="video_elements" rel="shadowbox">video link </a>
<a href="http://www.youtube.com/v/znyMx58fZqQ" class="video_elements" rel="shadowbox">video link </a></div>

<script type="text/javascript">

$("a.video_elements").fancybox({
    'transitionIn' : 'fade',
    'transitionOut' : 'fade',
    'titlePosition' : 'inside',
    'autoscale'  : 'true',
    'type' : 'swf'
});

Спасибо.

Answer 1

это будет работать для вас, но не будет группировать ваши видео YouTube.

     $(document).ready(function(){
          $('a.video_elements').click(function(event){
              event.preventDefault();
               $.fancybox({
               'titleShow'     : false,
               'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
               'type'      : 'swf', 
               'swf'       : {'wmode':'transparent','allowfullscreen':'true'} 
               }); 
          }); 
     });

но вы можете сделать это вручную с помощью опции "onComplete" в fancybox. вот близкий пример:

   'onComplete' :   function() { 
     $("#fancybox-wrap").hover(function() { 
           $("#fancybox-left").show(); 
           $("#fancybox-right").show(); 
        }, function() { 
           $("#fancybox-left").hide(); 
           $("#fancybox-right").hide(); 
        }); 
     }