colorbox 画像が表示されない
質問おねがい致します。
本業は紙媒体で 並行して独学でwebを学んでおりますがJqueryのcolorboxが表示されずに
いきづまっています。パスが違うとか素人の失敗だとはおもうんですが
ドリームウィーヴァーで作成しているのですが
テンプレートファイルを作成し 追加ページで画像にリンクをはり
<div class="box"><a href="/images/mapBig.png" rel="example1" title="map"><img src="/images/mapSmall.png" width="245" height="147" alt="map" /></a></div>
としているのですが ライブビューではちゃんとポップアップになるのですが
ブラウザーでプレビューしたりサーバーアップして確認すると
オーバーレイの黒い背景と白い棒が２本でてきて画像自体が表示されません
下記はテンプレートのソースです。
ジャバの部分はcolorboxからペーストです
colorbox.cssの画像へのパスは
url(images/controls.png) に統一しています
どなたかお願いします！！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Style-Type" content="text/javascript" />
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<!-- TemplateBeginEditable name="doctitle" -->
<title>00000000000000000000</title>
<!-- TemplateEndEditable -->
<meta name="description" content="0000000000000000000000000" />
<meta name="keywords" content="00000000000000000000000000000" />
<link href="../css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../js/colorbox/example1/colorbox.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/colorbox/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".example5").colorbox();
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
$(".example9").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
お礼
回答ありがとうございます。 頂いた回答を参考に、JS未経験ですがチャレンジしたいと思います！