Как показать видео и открыть в лайтбоксе по клику, с помощью jQuery prettyPhoto? - PullRequest
Новая
       32

Как показать видео и открыть в лайтбоксе по клику, с помощью jQuery prettyPhoto?

7 голосов
/ 15 августа 2011

Я пытаюсь использовать prettyPhoto для jQuery, чтобы добавить видео на мой сайт.

Я добавил исходный код jQuery и расположение prettyPhoto js в своей голове и до конца тега body, а также добавил код инициализации (как сказано в документации). 

   <script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
      });
    </script>

В моем HTML это то, что я написал, потому что я хотел, чтобы видео тоже показывалось, но когда кто-то нажимает на него, видео должно открываться как лайтбокс. 

<div id="video_player">
<a href="#" rel="prettyPhoto">
<iframe width="640" height="350" src="http://www.youtube.com/embed/cH6kxtzovew"  frameborder="0" allowfullscreen></iframe>
</a>
</div>

Но это не работает. Как мне это сделать?

1 Ответ

6 голосов
/ 15 августа 2011

Вот как вы должны это сделать

HTML 

<div id="video_player">
    <a href="http://www.youtube.com/watch?v=cH6kxtzovew" rel="prettyPhoto" title="My YouTube Video">
        <img src="http://img.youtube.com/vi/cH6kxtzovew/default.jpg" alt="YouTube" width="50">
    </a>
</div>

Нет необходимости изменять ваш JavaScript вообще.

Рабочая демонстрация: http://jsfiddle.net/naveen/HU8zx/
Документация: http://www.no -margin-for-errors.com / projects / prettyphoto-jquery-лайтбокс-клон / документация /

...