すぐに、私はWebデザインのまったくの初心者であることを説明したいと思います。その点で、私は自分の概念的なスキルレベルを超えた問題に遭遇したと思います。
手始めに、私は次のコードでyoutubeビデオを埋め込んだカラーボックスを正常に実装しました:
<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を使用してこのコードを別のコードブロックに埋め込もうとすると、新しい問題が発生します。ポップアップウィンドウを閉じようとすると、背景が不透明なままになり、元のWebページが表示されなくなります。明らかに、バックグラウンドで何かが競合していますが、その競合が何であるかはわかりません。
埋め込みを囲むコードは次のとおりです(埋め込みをダッシュでマークします)。
<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 -->
繰り返しになりますが、リンクされた画像をクリックすると、黒い背景だけが表示され、取り除くことができません。埋め込みが機能しなくなるようにコードで競合している可能性のあるものについてのアイデアや、それを見つける方法についてのアイデアはありますか?
前もって感謝します。