【jQuery】サムネイルで切り替わるギャラリー

はじめに

初めまして、NNCの石上です。
NNCが開発したプラグインを紹介するべく、記事を投稿していくことになりました。僕自身の勉強も兼ねて、という感じで書いていきますので、ごゆるりとお付き合いください。

ギャラリー

今回作成するのは「ギャラリー」機能です。

サムネイルが何枚か並んでいて、いずれかをクリックすると上のメイン画像が切り替わる、というもの。よく見かける仕様ですね。(画像のイラストは全て僕が描いています。格好良いでしょ?)

実際のコード

自画自賛もほどほどに、ポンポン進みます。
HTML・CSS・jQueryの実際のコードを、それぞれ順番に見ていきましょう。

<body>
    <main>
        <div class="large">
            <img src="img/01.jpg" alt="">
        </div>
        <div class="thumb">
            <ul class="thumb__list">
                <li class="thumb__item">
                    <img src="img/01.jpg" alt="">
                </li>
                <li class="thumb__item">
                    <img src="img/02.jpg" alt="">
                </li>
                <li class="thumb__item">
                    <img src="img/03.jpg" alt="">
                </li>
                <li class="thumb__item">
                    <img src="img/04.jpg" alt="">
                </li>
            </ul>
        </div>
    </main>
</body>
main {
  width: 800px;
  margin: 0 auto;
  padding-top: 50px;
}
.large {
  text-align: center;
  margin-bottom: 30px;
}
.large img {
  position: relative;
  width: 300px;
  height: auto;
}
.thumb__list {
  display: flex;
  justify-content: center;
}
.thumb__item {
  margin-right: 20px;
}
.thumb__item:last-of-type {
  margin-right: 0;
}
.thumb__item img {
  height: 100px;
  width: auto;
}
(function(){
    $('.thumb__item').on('click',function(){
        var number = $(this).find('img').attr('src');
        $('.large img').attr('src', number);
    });
});

ポイント

今回の仕組みを考えるにあたり、大まかな流れとして三つのステップに分けました。

1.サムネイル(.thumb__item)をクリックした時に
2.その中にあるimgタグのsrc属性を取得して、変数に格納
3.メイン画像(.large img)のsrc属性を上の変数で上書き

上のステップに従ってコードを書いていこうとなった時に、「src属性の取得・変更って、どうやるの?」という点が要になると思います。

そこで活躍してくれるのが、attrメソッドです。
html要素の属性(classとかhrefとか。もちろん”src”も含まれます)を取得・変更・追加できるメソッドになります。今回のシステムにおいてどうやって使用しているか、実際のコードを見ながら確認していきましょう。

var number = $(this).find('img').attr('src');

【 対象.attr( 属性, (変更する値) ) 】という記述が基本的な形式になります。
ここでは、クリックされた要素(this)の中のimg(findメソッドで見つけたimg要素)に続けてattr(‘src’)と記述することで、このimgのsrc属性を取得しています。

$('.large img').attr('src', number);

取得したsrc属性を変数:numberに格納したら、今度はメインとなる画像(.large img)のsrc属性を上書きしましょう。記述形式は先ほどとほとんど同じですが、属性を変更する場合のみ第2引数(ここではnumberに該当します)を書いてあげます。これにより変数の上書きが実行され、画像の内容も切り替わることになります。

以上で完成です!

RECENT ENTRIES

  • 【Javascript】GSAPで高度なアニメーションをお手軽に実装しよう

    VIEW MORE
  • 【Javascript】GSAPを使ってアニメーション実装をもっと自由に!

    VIEW MORE
  • 【Jsライブラリ】vanilla-tilt.jsで目を引くホバー演出を実装しよう

    VIEW MORE

CONTACT

contact