[jQuery] サムネールをクリックするとメインの画像が入れ代わる

サムネールをクリックするとメインの画像が入れ代わる。

<img src="pic1.png" id="photo" />

<p>
<img src="pic1.png" class="choice" style="cursor:pointer;" width="120" />
<img src="pic2.png" class="choice" style="cursor:pointer;" width="120" />
<img src="pic3.png" class="choice" style="cursor:pointer;" width="120" />
<img src="pic4.png" class="choice" style="cursor:pointer;" width="120" />
</p>

<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(function() {
    $("img.choice").click(function(){
        var ImgSrc = $(this).attr("src");
        var ImgAlt = $(this).attr("alt");
        $("img#photo").attr({src:ImgSrc,alt:ImgAlt});
        $("img#photo").hide();
        $("img#photo").fadeIn("slow");
        return false;
    });
});
</script>

<p>

</p>

$(function() {

$("img.choice").click(function(){

var ImgSrc = $(this).attr("src");

var ImgAlt = $(this).attr("alt");

$("img#photo").attr({src:ImgSrc,alt:ImgAlt});

$("img#photo").hide();

$("img#photo").fadeIn("slow");

return false;

});

</script>

参考サイト

【jQuery】サムネイルをクリックするとメイン画像が切り替わるシンプルな写真ギャラリー｜ KLUTCHE
http://klutche.org/archives/460/

参考サイト

関連記事