如何使用jQuery prettyPhoto显示视频,并在点击的灯箱中打开?

前端之家收集整理的这篇文章主要介绍了如何使用jQuery prettyPhoto显示视频,并在点击的灯箱中打开?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用prettyPhoto for 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>

但它不起作用.我该如何做到这一点?

解决方法

这是你应该怎么做的

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/

猜你在找的jQuery相关文章