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>- <img src=”http://www.trieste.bz/wp-content/uploads/2015/01/the_kawano01_s.jpg” alt=”” width=”69″ height=”80″ />
- <img src=”http://www.trieste.bz/wp-content/uploads/2015/01/the_kawano02_s.jpg” alt=”” width=”69″ height=”80″ />
- <img src=”http://www.trieste.bz/wp-content/uploads/2015/01/the_kawano03_s.jpg” alt=”” width=”69″ height=”80″ />
</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);
});
}
});
});初心者なので、詳しく教えていただければ幸いです。
よろしくお願いいたします。
- トピック「swap-image.jsを使用してギャラリーを表示させたい」には新たに返信することはできません。