サムネイルをクリックするとメイン画像(大きな画像)が切り替わるギャラリーを作りました。
<div class="item"> <div class="show-img"><img src="large01.jpg"></div> <ul class="thumb-list"> <li><a href="large01.jpg"><img src="thumb01.jpg"></a></li> <li><a href="large02.jpg"><img src="thumb02.jpg"></a></li> <li><a href="large03.jpg"><img src="thumb03.jpg"></a></li> </ul> </div> <script> $(function(){ $(".thumb-list li a").click(function(){ var thumbSrc = $(this).attr("href") $('.show-img img').fadeTo("slow", 0.1 ,function() { $(this).attr("src",thumbSrc).fadeTo("normal",1); }); return false; }); }); </script>
このギャラリーを同じページ内に2つ配置してみたのですが↓
<div class="item"> <div class="show-img"><img src="large01.jpg"></div> <ul class="thumb-list"> <li><a href="large01.jpg"><img src="thumb01.jpg"></a></li> <li><a href="large02.jpg"><img src="thumb02.jpg"></a></li> <li><a href="large03.jpg"><img src="thumb03.jpg"></a></li> </ul> </div> <div class="item"> <div class="show-img"><img src="large04.jpg"></div> <ul class="thumb-list"> <li><a href="large04.jpg"><img src="thumb04.jpg"></a></li> <li><a href="large05.jpg"><img src="thumb05.jpg"></a></li> <li><a href="large06.jpg"><img src="thumb06.jpg"></a></li> </ul> </div> <script> $(function(){ $(".thumb-list li a").click(function(){ var thumbSrc = $(this).attr("href") $('.show-img img').fadeTo("slow", 0.1 ,function() { $(this).attr("src",thumbSrc).fadeTo("normal",1); }); return false; }); }); </script>
そうするとサムネイルクリック時に両方のギャラリーのメイン画像が切り替わってしまって困っています。
IDとか使わずに、このままのコードでクリックしたほうのギャラリーのメイン画像のみにsrcを反映させるにはどうすればいいのでしょうか?
どなたか教えてください。
###試したこと
・「$('.show-img img').fadeTo~」を「$(this).parents().children('show-img img')」とかにしたけどだめだった。。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/29 09:03