javascript - colorbox 在 ExpressionEngine 嵌入中不起作用(youtube 弹出窗口)

标签 javascript css embed colorbox expressionengine

马上,我想解释一下,我是网页设计的新手。关于这一点,我认为我遇到了一个超出我的概念技能水平的问题。

对于初学者,我已经使用以下代码成功实现了带有嵌入 youtube 视频的 colorbox:

<head>
{js}
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/testStyle'}" />

<script>
$(document).ready(function(){
            $(".youtube").colorbox({iframe:true, innerWidth:435, innerHeight:344});
});
</script>
</head>

<body>
<p> <a class="youtube" href="http://www.youtube.com/embed/" title="horses">
<img src="/uploads/features/featured-block-1.jpg" /></a></p>
</body>

此代码完全按照我的意愿工作(即它会弹出视频,然后我可以通过在框外单击来关闭它。)

但是 当我尝试使用 ExpressionEngine 将此代码嵌入另一个代码块时,我遇到了新问题:当我尝试关闭弹出窗口时,背景保持不透明,因此我无法再看原网页。显然,背景中存在某些冲突,但我只是不知道冲突可能是什么。

这是围绕嵌入的代码(我用破折号标记了嵌入):

   <head>
</head>
    {favicon}
    {global_stylesheets}
    {js}

    <body class="technology">
        <div id="wrapper">
            {embed='embed/header'}
            <div id="masthead">
                {embed='embed/nav'}
                <div id="banner">

                    <div style="display:none;">

                    </div>
                </div> <!-- END div banner -->
                <br style="clear: left;" />
            </div> <!-- END div masthead -->

            <div id="content-main">
                <div id="content-col1">
                    <h3></h3>
                    <div id="lead-sentence">

                    </div>
                    <div id="main-body{if subpage_graphic != ''}-graphic{/if}">

            <h1> Hello world and welcome to my link!</h1>

        ------- {embed="in-store-analytics/testing2"} --------

                    </div> <!-- END div text-content -->

                    <br style="clear: both;" />
                </div> <!-- END div content-col1 -->
                {embed="embed/crosslinks"}
                <br style="clear: both;" />
            </div>
            {embed="embed/footer"}
        </div> <!-- END div wrapper -->

同样,当我点击链接的图片时,只出现一个黑色背景,我无法摆脱它。关于我的代码中可能存在冲突以使嵌入不再有效的任何想法或如何着手找出答案的想法?

提前致谢。

最佳答案

事实证明,我的一个嵌入正在调用 Raphael 库,这意味着该库被调用了两次。虽然我知道这不是最佳做法,但我仍然不明白为什么这会导致如此截然不同的功能。

关于javascript - colorbox 在 ExpressionEngine 嵌入中不起作用(youtube 弹出窗口),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12717973/

相关文章:

javascript - d3.json() 函数返回未定义

c# - 使用 Javascript 突出显示文本框中的文本

html - 如何在 bootstrap 固定导航栏中移动元素

javascript - 如何在 Node/Angular 应用程序中存储或检索嵌入代码?

javascript - 使用 Javascript 动态实现 Spring Security

javascript - url 验证正则表达式将电子邮件地址识别为 url

javascript - array.splice 在 Angular Js 指令中显示奇怪的行为

html - 为什么一般兄弟组合器允许切换伪元素的内容,而不是相邻兄弟?

javascript - 使用嵌入或对象标签中的元素

facebook - 如何像 youtube 一样在 Facebook 上分享我网站上的视频