W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:pS/S0q さんの質問

同一ページで複数のスワップイメージを見せたい、
ということで、下記のサイトを参考にやってみました。

http://depthcode.com/2010/10/swap.html

しかし、例えば1番のサムネイルの1つをクリックした後、
2番の大きい画像をクリックして拡大すると、1番でクリックした
サムネイルの画像が拡大表示されてしまいます。

このようになっています。
http://imageswapswap.at-ninja.jp/test/

きちんと分けて表示させたいのですが……。
どこを修正すれば、思うように動くでしょうか。

アドバイスを頂けると嬉しいです。
宜しくお願い致します。

みんなの回答 3 件

ID:PdRwpd さんの回答

片方のswapをswap2みたいな別の名前にしてから対応するように$(’div.swap2 li a’).click(function (e)〜と、もう一つ作ればとりあえず解決できると思う。試してないけど。

ID:pS/S0q

早速ありがとうございます。良さそうですね!できれば、まとまりを増やすごとに増やす、なんてことなくできればシンプルで良いのですが・・・。

ID:4WmlbX さんの回答

下記の部分を下のように変えたらどうかな?
$(’.swap p a’).attr(’href’,imagePath.replace(/.jpg/ig, "_b.jpg"));

$(this).parent(’a’).attr(’href’,imagePath.replace(/.jpg/ig, "_b.jpg"));

ID:pS/S0q

ありがとうございます。意味を理解していませんが、ちょっとやってみたところ、上手くいきませんでした。

ID:iQshYf

え、動くと思うけど
↓にするってことだよ?
$(mainImage).fadeOut(’fast’, function () {
  $(this).fadeIn().attr(’src’, imagePath);
  $(this).parent(’a’).attr(’href’,imagePath.replace(/.jpg/ig, "_b.jpg"));
});

「mainImage」の親要素のaタグのhrefを置換って意味です。

ID:pS/S0q

私の変更の仕方がおかしいのでしょうか。
こうなりました。
imageswapswap.at-ninja.jp/test2/

ID:iQshYf

コピペしたから、「’」が全角になってる。

ID:pS/S0q

(  ゚ ▽ ゚ ;)エッ!!

ご丁寧に有難うございます。
動くようになりました!

ID:lQPO4O さんの回答

元ソースがひどい。

ID:pS/S0q

(  ゚ ▽ ゚ ;)エッ!!

ID:aKLHby

この元ソースをキレイに書くとどのようになるのでしょうか?気になります。ご教示ください。

最終更新日:2014-01-24 (2,355 views)

関連するトピックス

ページ上部に戻る