Coder's Note

クリックで画像を切り替えるUIをjQueryで作る

サムネイルをクリックするとメインの画像が切り替わるスクリプト。jQueryを使って簡単に作ることができます。簡単なだけに必要になるたびに書いているのですが、コピペした方が早いのでメモ代わりに書いておきます。（別のブログで書いた記事の転載です。）

デモ

コード

.thumbnailの中にある画像をクリックすると#targetのsrc属性が切り替わるというコードです。（選択中のサムネイルにはselectというクラスがつきます。）

HTML

必要な部分だけを書き出しました。なので上のデモとはマークアップが少し違います。

<img id="target" src="image1">
<div class="thumbnail">
    <a href="image1"><img src="thumbnail1"></a>
    <a href="image2"><img src="thumbnail2"></a>
    <a href="image3"><img src="thumbnail3"></a>
    <a href="image4"><img src="thumbnail4"></a>
</div>

jQuery

まず最初にjQueryを読み込みます。そのあとに以下のコードを記述してください。HTMLに直接記述する場合は<script>でコードを囲むことを忘れずに！

$(function() {
    $('.thumbnail li:first img').addClass('select');
    $('.thumbnail li img')
        .click(function() {
            var src = $(this).parent().attr('href');

            $('.thumbnail img').removeClass('select');
            $(this).addClass('select').fadeTo;

            $('#target').attr('src', src);
            return false;
        });
});