端くれプログラマの備忘録 jQuery [jQuery] サムネールをクリックするとメインの画像が入れ代わる

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

2016年3月10日| @84kure| 2:59 PM

Categories:

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>

参考サイト

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