サポート » プラグイン » jQueryプラグインの導入

  • こんにちは!

    私は今、「ImageNavigation」というjQueryプラグインの導入を考えています。
    ダウンロード元http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/

    しかし、色々なWEBサイトの情報を参考に試行錯誤してもまったく上手くいきません。

    状況

    <?php wp_head(); ?>の直前に・・・

    <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/dropdowns.js”></script>

    <script type=”text/javascript” src=”js/jquery.js”></script>

    <script type=”text/javascript” src=”js/jquery.imageNavigation.js”></script>

    <script type=”text/javascript>

    $(function() {

    $(#image-navigation).imageNavigation();

    });

    と記入。

    body内には・・・

    <div id=”image-navigation”>
    <div class=”navi”>

    </div>
    <div class=”navi-image”>
    <img src=”images/photo1.jpg” />
    <img src=”images/photo2.jpg” />
    <img src=”images/photo3.jpg” />
    <img src=”images/photo4.jpg” />
    </div>
    <div style=”clear:both;”></div>
    </div>

    と記入。

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

    しかしまったく駄目です。

    どなたかわかりやすく教えていただけないでしょうか?
    よろしくお願いいたします。

15件の返信を表示中 - 1 - 15件目 (全26件中)
  • ども。

    【はじめに】

    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
    にファイルがあるわけですよね。

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

    【対策】

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

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

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

    トピック投稿者 kajibufoo

    (@kajibufoo)

    aimaimさん

    すばやい回答ありがとうございます。
    ご回答頂いたように作業してみましたが、やはりだめみたいです・・

    このように変更

    <div id=”image-navigation”>
    <div class=”navi”>

    </div>
    <div class=”navi-image”>
    <<img src=”http://kimi-yana.sakura.ne.jp/wp-content/uploads/2011/06/photo1.jpg&#8221; alt=”” title=”menu1″ width=”150″ height=”50″ class=”alignnone size-full wp-image-151″ />
    <<img src=”http://kimi-yana.sakura.ne.jp/wp-content/uploads/2011/06/photo2.jpg&#8221; alt=”” title=”menu1″ width=”150″ height=”50″ class=”alignnone size-full wp-image-151″ />
    <<img src=”http://kimi-yana.sakura.ne.jp/wp-content/uploads/2011/06/photo3.jpg&#8221; alt=”” title=”menu1″ width=”150″ height=”50″ class=”alignnone size-full wp-image-151″ />
    <<img src=”http://kimi-yana.sakura.ne.jp/wp-content/uploads/2011/06/photo4.jpg&#8221; alt=”” title=”menu1″ width=”150″ height=”50″ class=”alignnone size-full wp-image-151″ />
    </div>
    <div style=”clear:both;”></div>
    </div>

    更に。ネットで色々と検索してみるとこのようなものがあったので利用。

    設置
    <script type=”text/javascript” src=”js/jsloader.js”></script>

    <?php wp_head(); ?>

    でもやはり駄目でした。

    すみませんが、ご教授いただけませんか?

    ども。

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

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

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

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

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

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

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

    トピック投稿者 kajibufoo

    (@kajibufoo)

    aimimさん

    そもそも私のように基本も知らずに行うことが間違っているのかもしれませんが、よろしければご回答ください。

    ご回答に対する疑問点ですが・・・

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

    とありますが、どの部分のsrcを変更するのでしょうか?

    ちなみにbodyは今このようになっています。*画像表示無し
    <li><a href="#"><img src="<?php bloginfo('template_url'); ?>/imageNavigation/menu1.jpg" /></a></li>

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

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

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

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

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

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

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

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

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

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

    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'); ?>などで置き換えることも可能です。

    仕事の都合でレス遅くなりましたが・・・フォローして頂いてたみたいで。
    redcockerさん、ありがとうございます。

    はじめまして

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

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

    トピック投稿者 kajibufoo

    (@kajibufoo)

    皆様、数々のご回答まことに有難うございます。

    今の現状といたしましては、何とか画像を表示できる事はできました。

    しかし、スタイルシートの適用と残念ながら画像は動作しません。

    http://kimi-yana.sakura.ne.jp/

    今の現状です。↑

    テーマのスタイルシートに直接書き込んだりしてみたのですが画像の動作はやはりしません。

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

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

    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>

    になると思います。

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

    トピック投稿者 kajibufoo

    (@kajibufoo)

    redcockerさん御回答有難うございます。

    参考にさせて頂いたのですがやはり画像の動作はみられないです・・。

    http://kimi-yana.sakura.ne.jp

    現在はこのような感じです。

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

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

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

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

    追記します。

    配布先の説明を読むと、オプションの指定が出来るようなので、下記のように書いたほうが良いかもしれません。

    <script type="text/javascript">
    jQuery(function(){
    	jQuery("#image-navigation").imageNavigation({
    		time:2000,
    		animationTime:500,
    		rolloverTime: 0,
    		rolloutTime: 500
    	});
    });
    </script>

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

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

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

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

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

    aimaimさん フォロー有難うございます。
    閉じ忘れてました。

    あと、追記の書き方が悪かったですね。

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

    の代わりに

    <script type="text/javascript">
    jQuery(function(){
    	jQuery("#image-navigation").imageNavigation({
    		time:2000,
    		animationTime:500,
    		rolloverTime: 0,
    		rolloutTime: 500
    	});
    });
    </script>

    とすべきでした。
    両方とも効能はほぼ同じで、下の方は、配布元に書かれていたパラメーターを付け加えています。

    kajibufooさん、後はaimaimさんの仰る通りの方法で解決すると思います。

    トピック投稿者 kajibufoo

    (@kajibufoo)

    redcockerさん、aimaimさん御回答まことに有難うございます。

    皆さんの御意見を参考にさせていただきましたところ、右側の画像はオンマウスで切り替わるようになりました。

    後は、右の画像にオンマウスした時に左の画像が一緒に切り替わってもらえば完璧なのですが・・・

    これもjsファイルが原因なんでしょうか?
    http://kimi-yana.sakura.ne.jp/

    ↑現状です。

15件の返信を表示中 - 1 - 15件目 (全26件中)
  • トピック「jQueryプラグインの導入」には新たに返信することはできません。