【jQuery】サムネイル

質問

3つのサムネイル画像(.thumb)があります。
クリックした.thumbはopacityを1に、その他は0.5に切り替わる
する方法を教えてください。
始めは1番目.thumbのopacityは1でお願いします。

■html
<div id="ph-wrap">

<div id="photo">
<p><img src="./img/photo1.png" width="480" height="320" alt="" /></p>
<p><img src="./img/photo2.png" width="480" height="320" alt="" /></p>
<p><img src="./img/photo3.png" width="480" height="320" alt="" /></p>
</div>

<div id="thumb-wrap">
<p class="thumb"><img src="./img/photo1.png" width="120" height="80" alt="" /></p>
<p class="thumb"><img src="./img/photo2.png" width="120" height="80" alt="" /></p>
<p class="thumb"><img src="./img/photo3.png" width="120" height="80" alt="" /></p>
</div>

</div>

■CSS(一部抜粋)
#thumb-wrap{
float:left;
margin:0 0 0 10px;
padding:0;
width:120px;
}

#thumb-wrap img{
width:120px;
height:80px;
cursor:pointer;
opacity:0.5;
-moz-opacity:0.5; /* Firefox */
filter: alpha(opacity=50); /* IE */
}

.opc{
opacity:1.0;
-moz-opacity:1; /* Firefox */
filter: alpha(opacity=100); /* IE */
}

■jQuery
$(function () {
var photoImg = "#photo img"
var thumbWrapImg = "#thumb-wrap img"

$("#photo p:gt(0)").hide();
$(thumbWrapImg).eq(0).css({"opacity":1});

$(thumbWrapImg).click(function () {
$(this).animate({"opacity":1},100);
$(photoImg).attr("src",$(this).attr("src"));
});

});

回答No.1

ok-rjak · ベストアンサー

> クリックした.thumbはopacityを1に、その他は0.5に切り替わる
> する方法を教えてください。

単純に

$(function(){
// クリックした要素以外は0.5で、対象は1
$('.thumb').click(function(){
$('.thumb').css('opacity'. 0.5);
$(this).css('opacity', 1);
});
// 最初の１つは1
$('.thumb').css('opacity'. 0.5);
$('.thumb-wrap .thumb:first-child').css('opacity', 1);
});

検証はしていませんが・・・

お礼

なるほど、単純な事だったんですね・・・
ありがとうございました！