Search code examples
javascriptcssembedcolorboxexpressionengine

colorbox not working within ExpressionEngine embed (youtube pop-up)

right off the bat, I want to explain that I am a total newbie at web design. On that note, I think that I have come across a problem that is beyond my conceptual skill level.

For starters, I have successfully implemented colorbox with an embed youtube video with the following code:

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

This code works exactly as I would like it to (i.e. it pops up the video which I can then close by clicking outside the box.)

However when I try to embed this code within another block of code using ExpressionEngine I have new problem: when I try to close the pop-up window, the background stays opaque so that i can no longer see the original webpage. Obviously, something is conflicting in the background, but I just have no idea as to what that conflict might be.

Here is the code surrounding the embed (I mark the embed with dashes):

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

Again, when I click on the linked image, only a black background appears which I cannot get rid of. Any ideas about what might be conflicting in my code so as to make the embed no longer work or ideas how to go about finding out?

Thanks in advance.

Solution

  • It turns out that one of my embeds was calling the Raphael library, which meant that the library was being called twice. Though I know it's not best practice, I still don't understand why this would result in such radically different functionality.