初心者向け。jQueryでサムネをクリックしてメイン画像を切り替える方法

1611 回閲覧されました

公開日 : 2022年9月9日
最終更新日 : 2024年9月28日

みなさんこんにちは、jonioです。

今回はサイトによくあるサムネイル画像をクリックした時にメインの画像が切り替わるのをjQueryのコピペで実装する方法の解説です。

デモは下記になります。

実装用に適当に画像を5つ用意してください。

コード

HTMLのコードを下記にします。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <title>jQueryのデモ</title>
    </head>
    <body>
        <div class="container">
            <img class="main-img" src="images/img1.png"/>
            <div class="thumbnail-wrap">
                <img class="thumbnail-img" src="images/img1.png"/>
                <img class="thumbnail-img" src="images/img2.png"/>
                <img class="thumbnail-img" src="images/img3.png"/>
                <img class="thumbnail-img" src="images/img4.png"/>
                <img class="thumbnail-img" src="images/img5.png"/>
            </div>
          </div>
        <script type="text/javascript" src="js/common.js"></script>
    </body>
</html>

CSSのコードを下記にします。

.thumbnail-img{
    width: 70px;
    height: 70px;
    display: block;
}
.thumbnail-wrap{
    display: flex;
    justify-content:space-between;
    margin-top: 30px;
}
.container{
    width: 400px;
    margin-top: 100px;
    margin-left:auto;
    margin-right:auto;
}
.main-img{
    width: 400px;
    display: block;
    margin-left:auto;
    margin-right:auto;
}
body{
    background-color:#b2eef7;
}

jQueryのコードを下記にします。

$(function () {
    $(".thumbnail-img").on("click", function () {
        $('.main-img').attr('src', $(this).attr('src'));
    });
});

コピペでやる場合は画像のパスを変えるだけです。

簡単にjQueryのコードの解説をします。

2行目がサムネ画像をクリックした時です。

3行目がメイン画像のパスをサムネ画像のパスに切り替えるための記述です。

これで完成です。