【问题标题】:How to display Youtube videos in a jQuery lightbox (Wordpress)?如何在 jQuery 灯箱(Wordpress)中显示 Youtube 视频?
【发布时间】:2011-01-16 05:18:14
【问题描述】:

我尝试过 lightbox-plus、fancybox 等...

但我不知道该怎么做。

这些视频是带有包含 Youtube 视频链接的图片帖子:

<p><a href="http://www.youtube.com/watch?v=zUN826BdvV4">
<img class="alignnone size-thumbnail wp-image-40" 
title="Screenshot" src="http://localhost/custom-post-type/
wp-content/uploads/2011/01/Screenshot2-150x150.png" 
alt="" width="150" height="150" /></a></p>

Fancybox for Wordpress,例如,让我给图片添加一个灯箱,但如果图片链接到 Youtube 视频,它就不起作用了。

有什么建议吗?

【问题讨论】:

  • 你能发布你的 JavaScript/JQuery 代码吗?只发布 HTML 只是发布了一半的问题。
  • @jmort253 我正在使用 Fancybox for Wordpress 插件。它不需要任何 javascrit,它只适用于任何附加媒体的链接
  • 另外,你说它不起作用是什么意思?
  • 这里有某种 JavaScript 在起作用。这不是魔术。您的页面上是否有任何可以帮助解决问题的 JavaScript?我知道您自己没有编写 JavaScript,但它必须存在,除非 Wordpress 中的 Fancybox 使用 Flash。我建议您使用 Chrome Debugger 或 Firebug 进行检查。我敢打赌这很简单。

标签: wordpress fancybox


【解决方案1】:

一个简单的方法是使用 PrettyPhoto (link to site, link to wordpress plugin)。激活很简单:

$('a[rel="prettyPhoto"], .myvideolinkclass').prettyPhoto();

而且 HTML 非常干净:

<a href="http://youtube.com/a-real-youtube-link" rel="prettyPhoto[youtube]">My Awesome Youtube Video</a>

【讨论】:

    【解决方案2】:

    您看过 FancyBox 博客吗? Fancybox 中有一个 YouTube 视频示例:

    http://fancybox.net/blog

    脚本标签导入 FancyBox:

    <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js">
    </script>
    

    JavaScript/Jquery 绑定点击事件:

    $("#tip4").click(function() {
    $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'     : 680,
            'height'        : 495,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
                 'wmode'        : 'transparent',
                'allowfullscreen'   : 'true'
            }
        });
    
    return false;
    });
    

    HTML:

    <a id="tip4" title="'Zombieland' Trailer"
        href="http://www.youtube.com/watch?v=071KqJu7WVo&amp;feature=player_embedded#at=41">
            Try now
    </a>
    

    【讨论】:

    • 我尝试使用 Fancybox for Wordpress 插件来做这件事,但我认为它不起作用。
    • 也许可以尝试使用博客上的技术。 Wordpress 非常适合与其他工具配合使用。
    【解决方案3】:

    我发现how

    <div style="text-align: center;"><a class="fancybox" href="#welcomevideo"><img src="http://www.howieolson.com/wp-content/uploads/2010/04/howie-olsen-welcome-video.jpg" width="251px" height="188px" alt="Welcome To High Output"></a></div>
    
    <div style="display:none" id="welcomevideo">
    <object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object>
    </div>
    

    它似乎适用于带有内联内容的链接。

    (如果有更好的解决方案,请告诉我)。

    【讨论】:

    • +1 - 这就是我在 Fancybox Wordpress 插件论坛中看到的内容。它看起来不正确,因为对象通常用于嵌入诸如闪存之类的东西,但如果它有效并且被记录为有效的解决方案,那么我说去吧:)
    猜你喜欢
    • 2013-12-09
    • 1970-01-01
    • 2011-10-09
    • 2010-11-24
    • 2013-03-12
    • 1970-01-01
    • 2017-03-02
    • 2012-05-02
    • 2012-03-08
    相关资源
    最近更新 更多