jQueryプラグインの導入

ども。

【はじめに】

src=”….”の中にある画像ファイルを表示したり、Javascriptファイルを実行させようとしている・・・ということはお分かりですよね？

【原因】

ブラウザは、imageNavigationを表示するページ(投稿)を基準として、そのファイルを探そうとします。
具体的には、たとえば、
http://example.com/sample
というURLのページにimageNavigationを表示しようとしとき、
HTMLに、src=”images/photo1.jpg”と書いてあったら、
http://example.com/sample/images/photo1.jpgにファイルがあるものとして探します。

一方で、kajibufooさんは、

wp-content/themes/テーマ/imageNavigationのimageNavigationフォルダの中に

ファイルを置いていますから、
実際は、http://example.com/wp-content/themes/テーマ/imageNavigation/images/photo1.jpg
にファイルがあるわけですよね。

そういうわけで、Jｓ、画像ファイルが見つからず、何も表示されない状態になっています。

【対策】

とりあえず
src=”ファイル名”になっているところを、
src="<?php bloginfo('template_url'); ?>/imageNavigation/ファイル名"に書き換えましょう。

その後、imageNavigationを表示したいページをブラウザで開いて、ソースコードを表示して、src=”http://..(中略)../ファイル名”になっている部分と、実際にファイルを置いた位置が一致しているかどうか確認してください。

他に原因があって、これだけでは思い通り動かないかもしれませんが、
少なくとも画像だけは表示されるはずです。

ども。

私には、このフォーラムにかいてあることしかわかりませんから、

やはりだめみたいです・・

と書かれても、どうダメなのかがさっぱり分かりません。

画像すら出ないのか、画像は出るけれど、カーソルを持っていっても入れ替わらないのか。
どうダメなのか、具体的に書いてください。

それから、PHPなりHTMLのコードを書くときは、このフォーラムの記入欄の上にある
「code」ボタンを押して、バックスラッシュで囲ってください。
kajibufooさんの書かれたコードは、<ul>とか<li>が読めませんよね？

それから、いろんなことをいっぺんにやろうとすると、何が悪くて思い通りにならないのか、分からないですよ。

javascriptも、<script type="text/javascript" src="js/jsloader.js"></script>って書いたら、ブラウザがファイルを見つけられないから動かないですよって、説明しましたよね？

やはりだめみたいです・・

では、答える側としても、現象の把握のしようがありません。
単に画像が表示されないのと、画像は表示されたが動作しないでは、意味が違いますので。

まず、画像が表示されない問題と動作しない問題は切り離して考える必要があります。

それから下記のJavaスクリプトは不要なので外してください。

http://www.yomotsu.net/lab/javascripts/jsloader

少なくとも画像が表示されない原因は、ファイルまでのパスを勘違いされているからだと思います。

更に動作するか動作しないかは、別の要因にも左右される場合があるため、まずは画像を表示されるところまでを完成させるのが先です。

更にwp-content/themes/テーマ/imageNavigationのimageNavigationフォルダの中にJｓ、画像、スタイルシートが入ってます。

と書かれていますが、解凍して得られるフォルダをテーマディレクトリにアップロードしただけでしょうか？
ディレクト名の大文字小文字の区別も間違いもありませんね？

上記を前提として話を進めますが、まず、

http://ブログのURL/wp-content/themes/テーマ/imageNavigation/images/menu1.jpg

にアクセスして下さい。
※「ブログのURL」と「テーマ」は自身の環境に置き換えてください。

画像が表示されるなら、下記でOKかと思います、表示されない場合は、URLが間違っていますが、こればかりは、こちらでは調べようがありません。

<script type="text/javascript" src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/js/jquery.js"></script>
<script type="text/javascript" src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/js/jquery.imageNavigation.js"></script>
<script type="text/javascript>
$(function() {
$(#image-navigation).imageNavigation();
});
</script>

<div id="image-navigation">
  <div class="navi">
    <ul>
      <li><a href="#"><img src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/images/menu.jpg" /></a></li>
      <li><a href="#"><img src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/images/menu.jpg" /></a></li>
      <li><a href="#"><img src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/images/menu.jpg" /></a></li>
      <li><a href="#"><img src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/images/menu.jpg" /></a></li>
    </ul>
  </div>
  <div class="navi-image">
      <a href="#"><img src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/images/photo1.jpg" /></a>
      <a href="#"><img src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/images/photo2.jpg" /></a>
      <a href="#"><img src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/images/photo3.jpg" /></a>
      <a href="#"><img src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/images/photo4.jpg" /></a>
  </div>
  <div style="clear:both;"></div>
</div>

上記のようにsrc=""の部分は、ファイルまでのURLになっていないといけません。
このURLは、アップロードされた場所によって異なります。

何を示しているか分かり易いように、URLをベタ書きしましたが、aimaim
さんの様に<?php bloginfo('template_url'); ?>などで置き換えることも可能です。

はじめまして

・jQueryのプラグインですがjQueryのバージョンによって動作するものしないものなどがあります。
・wordpressは自前でjQueryを持っており、プラグイン等で自動で読み込まれる場合もあります。
そのため<script type=”text/javascript” src=”js/jquery.js”></script>
このように直接読み込むことはなるべく避けたほうがいいです。
wp_enqueue_script等で関連ファイルとしてarray(‘jquery’)等としたほうが無難でしょう。
・最近のものは大丈夫ですが、偶にnoconfrictを考慮しないものもありますので
そちらの注意も必要です。

上記を踏まえた上でこちらで確認してみたところ動きました。
http://jdbb777.toypark.in/

おそらく<script type=”text/javascript” src=”js/jquery.js”></script>として
読み込んでいますがwordpressのものも読み込まれていてエラーが出ているかと思います。
noconfrictとなっているため

<script type="text/javascript>
$(function() {
$(#image-navigation).imageNavigation();
});
</script>

ではもちろん動きません。

画像が表示されたなら、進展はしています。

jsファイルが読み込まれていないのでしょうか？

私のJavaスクリプトのパスの予想が間違っているなら、その可能性も否定出来ませんが、jdbbさんが仰っているような問題に原因がある可能性が高いのではないかと思います。

その問題を解消するには、下記の記述を変更する必要があります。

<script type="text/javascript" src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/js/jquery.js"></script>
<script type="text/javascript" src="http://ブログのURL/wp-content/themes/テーマ/imageNavigation/js/jquery.imageNavigation.js"></script>
<script type="text/javascript>
$(function() {
$(#image-navigation).imageNavigation();
});
</script>

最初に書いておきますが、私は詳しくないですし、未検証ですので、本当は実際に動かされているjdbbさんのサイトのソースを見て、真似たほうが良いと思います。
私の居る海外の環境からは、jdbbさんのサイトにはアクセス出来ないので、jdbbさんのサイトのやり方に沿ったアドバイスは残念ながら出来ません。

PHPで書いた部分までは、jdbbさんのソースを見ても分かりませんが、真似できる部分もあると思います。

まず、Javaスクリプトの読み込み方を変え、下記のような記述でJavaスクリプトを呼び出します。jQueryはWordPressに含まれるものを利用しています。

<?php
wp_enqueue_script('jquery');
wp_enqueue_script('jquery.imageNavigation', '/wp-content/themes/テーマ/imageNavigation/js/jquery.imageNavigation.js', array('jquery'), '1.0');
?>

jquery.imageNavigation.jsがjQuery依存することは記述しているので、もしかするとwp_enqueue_script('jquery');は不要かもしれません。このあたりは私には分かりません。

上記のようにwp_enqueue_script()を使った場合、下記も修正が必要です。

<script type="text/javascript>
$(function() {
$(#image-navigation).imageNavigation();
});
</script>

$()が使えなくなり、代わりにjQuery()を使う必要があるので、

<script type="text/javascript>
jQuery(function() {
jQuery(#image-navigation).imageNavigation();
});
</script>

になると思います。

何もテストしてませんので、もし、記述に誤りがありましたらすみません。

ソースを拝見したところ、概ねいい感じなんですが、

<script type='text/javascript' src='http://kimi-yana.sakura.ne.jp/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://kimi-yana.sakura.ne.jp/wp-content/themes/twentyten/imageNavigation/jquery.imageNavigation.js?ver=1.0'></script>

でJavaスクリプトが読み込まれる前に、

<script type="text/javascript>
jQuery(function() {
jQuery(#image-navigation).imageNavigation();
});
</script>

が書き出されてしまっています。

順番が逆になるようにするとどうでしょうか？

ども。
redcockerさんは、「順番が逆になるようにするとどうでしょうか？ 」
と書かれていますが、順番が逆というか、重複してますね。

ヘッダーの中に書かれている、

<script type="text/javascript>
jQuery(function() {
jQuery(#image-navigation).imageNavigation();
});
</script>

が、重複していて、さらに、"text/javascriptのダブルコーテーションが閉じられていないのが悪さしています。

ですから、これを消してしまえば、動くと思いますが。