如何使用 jQuery PrettyPhoto 显示视频并在单击时在灯箱中打开？

发布于 2024-11-29 17:18:10 字数 676 浏览 0 评论 0原文

我正在尝试使用 jQuery 的 PrettyPhoto 将视频添加到我的网站。

我确实在我的头中添加了 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>

但这不起作用。我怎样才能做到这一点？

原文

I am trying to use the prettyPhoto for jQuery to add a video to my website.

I did add the jQuery source code and the prettyPhoto js location in my head, and before the end of my body tag, and I also added the initializing code (as said in the documentation).

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

In my HTML, this is what I wrote because I wanted the video to show too, but when someone clicks on it the video should open as lightbox.

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

But it's not working. How do I make this happen?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我们只是彼此的过ke 2024-12-06 17:18:10

这就是你应该这样做的

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/

This is how you should do it

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>

No need to change you JavaScript at all.

Working Demo: http://jsfiddle.net/naveen/HU8zx/
Documentation: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/

回复收藏 0 原文

~没有更多了~