サポート » 使い方全般 » swap-image.jsを使用してギャラリーを表示させたい

  • swap-image.jsを使用して、画像を切り替えてギャラリーを表示させたいのですが、
    切り替えができません。

    コードをどこの部分にいれたら良いか、書き換え方法などを教えていただきたいです。
    よろしくお願いいたします。

    ワードプレスではないのですが、下記サイトのswap-imageを使用しています。
    下記のように切り替えたいのですが、jsが効かないのか切り替えられません。
    http://www.latelastyle.com/therapist.html

    <ソース>
    <!– thera –>
    <div class=”thera”>
    <h3>◆ 河野セラピスト</h3>
    <div class=”left mr20 mt10″>
    <!–swap image–>
    <div class=”swap”>
    <p><img src=”http://www.trieste.bz/wp-content/uploads/2015/01/the_kawano01.jpg” alt=”” width=”210″ height=”230″ /></p>

    </div>
    </div>
    <table class=”right”>
    <tr>
    <td>年齢:</td>
    <td>20代半ば</td>
    </tr>
    <tr>
    <td>マッサージ歴:</td>
    <td>3年以上</td>
    </tr>
    </table>
    <div class=”thera_tb2 right pt20″>
    <p><span>コメント</span>
    美しいビジュアルからは想像もできないテクニックを持つセラピストで、そのギャップにお客様を感動させてくれます。また、純粋な性格と嫌味の無い笑顔が最高の癒しを与えてくれます。謙虚でまじめな姿勢が抜群の指名率となっております。大変ファンが多く、セラピストからも愛されるほどです。お早目のご予約是非お待ちしております。</p>
    </div>
    </div>
    <br class=”clear”/>
    <div class=”line”></div>
    <!– //thera –>

    <!– thera –>

    <コード>
    <!–swap-image設定–>
    <?php wp_enqueue_script(‘swap’, get_bloginfo(‘template_url’) . ‘/js/swap-image.js’,array(jquery)); ?>
    <script src=”<?php bloginfo(‘template_url’); ?>http://code.jquery.com/jquery-1.8.2.min.js“></script>
    <!–swap-image設定–>

    <swap-image.js>

    jquery(function ($) {
    $(‘div.swap li a’).click(function (e) {
    e.preventDefault();
    var imagePath = $(this).attr(‘href’);
    var mainImage = $(this).parents(‘div.swap’).find(‘p img’);
    var selectedNo = $(this).parents(‘div.swap’).find(‘li a’);
    $(selectedNo).removeClass(‘selected’);
    $(this).addClass(‘selected’);
    if (imagePath == mainImage.attr(‘src’)) {
    return;
    } else {
    $(mainImage).fadeOut(‘fast’, function () {
    $(this).fadeIn().attr(‘src’, imagePath);
    });
    }
    });
    });

    初心者なので、詳しく教えていただければ幸いです。
    よろしくお願いいたします。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • モデレーター gatespace

    (@gatespace)

    (WordPressのプラグインではないので、使い方全般に移動します)
    ※ソースコードを投稿するときはその部分を「code」ボタンで囲ってくださいね。

    当該部分のソースのみでは判断できませんが、jQuery本体を script タグで外部のライブラリのソースをURLにした場合、プラグインなどでWordPress本体同胞のjQueryするものとバッティングする恐れがあります。

    jQueryプラグインを使いたい場合、この書き方オススメできません。

    functions.phpに記述することをおすすめします。
    やり方はこちらを参考になさってください
    http://eastcoder.com/2014/07/proper-way-to-enqueue-scripts-and-styles-with-wordpress/

    WordPress で jQuery を使う時の注意点

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「swap-image.jsを使用してギャラリーを表示させたい」には新たに返信することはできません。