Question

我需要一些帮助。我从wordpress中的自定义字段中引入了一个字符串。此字符串是youtube和vimeo的iframe嵌入代码。我需要为这个iframe添加一个类，以便fancybox能够做到这一点。

<?php
$videoLinks=get_post_meta($post->ID, "iframe video embed code", true);
echo $videoLinks;?>
<script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>

通过在自定义字段中插入iframe嵌入代码进行测试时，我得到了这个。（没有增加课程）

<iframe src="http://player.vimeo.com/video/33039612?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"    webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a   href="http://vimeo.com/33039612">HG Skis: Trillinton..</a> from <a   href="http://vimeo.com/hgskis">HG Skis</a> on <a href="http://vimeo.com">Vimeo</a>.</p>  <script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>

相对较新的jquery，fancybox适用于使用fancybox类手动标记的图像。基于特定事件添加课程会解决我的问题吗？

Answer 1

这可能与时间有关。如果fancybox通过在DOM上自动触发的脚本运行，寻找“fancybox”元素来附加事件处理程序，那么在你的addClass脚本触发时它可能已经完成了它的工作。有些东西告诉我这不一定是问题;文档就绪功能实际上比完全构建页面之前运行的脚本要晚。

还存在语法问题：'fancybox fancybox.iframe'无效。如果要添加多个，可以添加空格分隔的类，但“fancybox.iframe”不是有效的类。我相信JavaScript会让你添加它，但是你无法设置它，并且可能会有选择它的问题。

您是否只需要$('iframe').addClass('fancybox')？

我确保你的addClass首先成功，如果是的话，所需要的所有类都存在并计入。然后，调试时序问题。

Answer 2

您展示的代码运行正常。也就是说，当我打开一个文件时，它可以工作：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<iframe>sfdfsf</iframe>
<script>
    $('iframe').addClass('fancybox fancybox.iframe');
</script>

您的fancybox代码是什么样的？

您可以使用以下内容将YouTube链接转换为嵌入式视频：

 $(document).ready(function() {

       $("a.youtube").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',    // <--add a comma here
             'swf'                 : {'allowfullscreen':'true','wmode':'opaque'}
              });
             return false;

        });

使用Vimeo网址也可以做同样的事情。

Answer 3

试

<script>
 $(document).ready(function(){
  $('iframe').addClass('fancybox fancybox.iframe');
 });
</script>

它应该起作用......当然，我假设你使用的是fancybox v2.x

使用jquery将类添加到php生成的元素

3 个答案: