ども。
これを書くと、kajibufooさんが混乱するかもしれませんが・・・
画像のすぐ上に、
<script type="text/javascript">
jQuery(function(){
jQuery("#image-navigation").imageNavigation({
time:2000,
animationTime:500,
rolloverTime: 0,
rolloutTime: 500
});
});
</script></p>
がもう既に入っているので、（</p>は不要ですが・・・）
<script type="text/javascript>
jQuery(function() {
jQuery(#image-navigation).imageNavigation();
});
</script>
の方は、削除するだけで大丈夫です。
＃すみません、書き方が悪かったのは、むしろ私の方です。
kajibufooさん
ごめんなさい、入れ違いになっちゃいました。
<script type>
jQuery(function(){
・・・中略・・・
});
</script>
が、ダブって２ヶ所にある状態になっていますよね？
ヘッダの中と、画像のすぐ上に。
このうち、ヘッダの方は、場所が悪くて動かないので、削除してください。
あとは、もう右側画像が、縦一列に並んでしまっているのを重ねるだけですね。
これは、CSSの読み込みがどこかで消してしまったためです。
ヘッダに、
<link rel="stylesheet" href="http://kimi-yana.sakura.ne.jp/wp-content/themes/twentyten/imageNavigation/image_navigation.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://kimi-yana.sakura.ne.jp/wp-content/themes/twentyten/imageNavigation/style.css" type="text/css" media="all" />
を書き加えます。
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
より後ろが良いですよ。
これで、お望みの動作に、一応なるはずですが。
一応、aimaimさんが指示された箇所は対処されたように見えますが、もし、現在も作業中でしたら、この話は、流してください。
一応、左側のメニュー上にマウスを持って行くと、右の画像が反応する時がありますね。
なので、一応、スクリプトは動いていそうな気もしますが、気になるのは下記の部分です。
<div class="navi-image">
<a href="#"><img src="http://kimi-yana.sakura.ne.jp/wp-content/themes/twentyten/imageNavigation/photo1.jpg" /></a><br />
<a href="#"><img src="http://kimi-yana.sakura.ne.jp/wp-content/themes/twentyten/imageNavigation/photo2.jpg" /></a><br />
<a href="#"><img src="http://kimi-yana.sakura.ne.jp/wp-content/themes/twentyten/imageNavigation/photo3.jpg" /></a><br />
<a href="#"><img src="http://kimi-yana.sakura.ne.jp/wp-content/themes/twentyten/imageNavigation/photo4.jpg" /></a>
</div>
行末の<br />は、不要で、些細な事ですが、動作にも関連しているようです。
これで、右メニューの上にマウスを持って来ると、対応する右（多分下に移動？）の画像が完璧に反応するようになると思うのですが、なぜか、４つの画像が同時に表示されてしまう現象は、多分、解消しませんよね？
目下のところ、ここがちょっと謎です。
完璧な解決法が出せなくてすみません。
右側の画像が４つ同時に表示される原因分かりました。
付属のCSSを読み込んでなかったからです。
うっかり、忘れてました。
ヘッダ部分に
<link href="http://kimi-yana.sakura.ne.jp/wp-content/themes/twentyten/imageNavigation/css/image_navigation.css" rel="stylesheet" type="text/css" />
<link href="http://kimi-yana.sakura.ne.jp/wp-content/themes/twentyten/imageNavigation/css/style.css" rel="stylesheet" type="text/css" />
の追加でいけるのではないでしょうか？
ただし、CSSのURLが正しいかは分かりませんので、URLの場所にCSSファイルがあるか確認し、違っていれば、URLを修正して下さい。
aimaimさん
redcockerさん
jdbbさん
完璧に動作確認ができました！！
何回も何回も本当にありがとうございました。
すいません・・動作は完璧なんですがさわっている時にひとつ疑問点が・・
左の画像にオンマウスするとオンマウスされている画像が変わるんですが、これはなぜ変わるのでしょうか？
menu1.jpg→menu1_on.jpgに変わる。
menu1_on.jpgはどこにも表記されていないとおもうのですが・・
どなたか最後に教えていただけませんか？
非常に難しい質問ですが、簡単に言ってしまえば、その書き換えを読み込んだJavaスクリプトでやっています。
ですから、理解するには、Javaスクリプトの知識が必要ですね。
ブラウザが、サーバーから受け取ったデータをJavaスクリプトで書き換えているため、実際の表示、動きは、ソースと別にものなりますので、理解しにくいかもしれません。
WordPressは、ブラウザにソース通りのデータを送信していますが、ブラウザが（Javaスクリプトに基づいて）勝手に受け取ったデータを書き換えていると思って頂ければ良いかと。
つまり、ブラウザに依存した動作になりますので、ブラウザによっては正常に動作しないケースもあるかもしれません。
具体的には、jquery.imageNavigation.jsの
if(option.rolloverImage) {
overSrc = $("img", this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2");
$(this).prepend('<img src="'+overSrc+'" class="over" />');
$("img.over" ,this).css("position", "absolute").css({opacity: 0.0});
}
あたりで処理しています。
また問題点がでてしまいました・・
プラグインは無事に導入できたのですが、サイドバーが画像の下にあり本来の位置に配置する事ができません。
画像サイズを小さくしてみたりなど試行錯誤してるんですが動いてくれない状況です。
どなたかお助けを・・・
CSSに起因する問題ではないでしょうか？
float:ポジションで整形していると、ちょっとしたミスで起こりえます。
おそらく、今回の作業でテーマを弄られていると思いますが、その際に必要な要素を消したり、不要な要素を付け加えてしまったなどの原因が考えられるかと思います。
aimaimさんが指摘されていましたが、
<script type="text/javascript">
jQuery(function(){
jQuery("#image-navigation").imageNavigation({
time:2000,
animationTime:500,
rolloverTime: 0,
rolloutTime: 500
});
});
</script></p>
の最後の</p>のように対応する開始タグがなく、終了タグのみ設置されているケースも見受けられましたので、同様に、例えば、正しく閉じていない<div>などの要素があるのかもしれません。
今回CSSを２つ追加していますが、これは多分関係ないとは思いますが、一時的に外せば、原因か否か特定できますよね。
