如何使用jQuery prettyPhoto展示视频，并在点击时在灯箱中打开？

Question

我想使用jQuery的prettyPhoto来将视频添加到我的网站。

我已经在标签中添加了jQuery的源代码和prettyPhoto js位置，在结束前也添加了初始化代码（如文档中所述）。

   <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>

但是它没有起作用。我该如何做到这一点？

- James

Answer 1

以下是正确的操作方法

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-lightbox-clone/documentation/

- naveen