簡易フォトギャラリー

/* HTML <div class="gallery"> <div class="mainimage"> <img src="images/photo-01.jpg" alt=""> </div> <ul class="thumbnails clear"> <li class="selected"><a href="#" data-img="images/photo-01.jpg"><img src="images/thumbnail-01.jpg" alt=""></a></li> <li><a href="#" data-img="images/photo-02.jpg"><img src="images/thumbnail-02.jpg" alt=""></a></li> <li><a href="#" data-img="images/photo-03.jpg"><img src="images/thumbnail-03.jpg" alt=""></a></li> <li><a href="#" data-img="images/photo-04.jpg"><img src="images/thumbnail-04.jpg" alt=""></a></li> <li><a href="#" data-img="images/photo-05.jpg"><img src="images/thumbnail-05.jpg" alt=""></a></li> </ul> </div><!-- / .gallery --> */ /* CSS .gallery { width: 510px; margin: 0 auto; padding: 20px; background: #ededed; border-radius: 5px; line-height: 0; } .mainimage { text-align: center; } .mainimage > img { max-width: 100%; } .thumbnails { margin: 10px 0 0 0; } .thumbnails li { float: left; margin: 0 2px 0 0; border: 2px solid #ededed; } .thumbnails li.selected { border: 2px solid #8ac2d0; } */ $(function(){ // プリロード：関数の定義 function preloadImage(path) { $('<img>').attr('src', path); } $('.thumbnails').on('click', 'li > a', function(event) { event.preventDefault(); // <a>のデフォルト挙動抑制 var $this = $(this); // ボタンのアピアランスを変更 $this.parents().siblings() // 兄弟要素を全て返す → liを取得 .removeClass('selected') // 要素からクラス（.selected）を削除 .end() // 直前のトラバースをキャンセルして、ひとつ前の状態に戻す $this.parent().siblings() → $this.parent() .addClass('selected'); // 要素にクラスを追加 // 写真を差替え var imgPath = $this.data('img'); // クリックされた<a>のdata-img属性の値を取得 $('.gallery .mainimage img').attr('src', imgPath); // メイン<img>のsrc属性を書き換え // .attr('属性')、.attr('属性','値')：タグの属性値を取得・変更するメソッド。パラメータが1つの場合は値を取得、2つの場合は値を変更 }) // プリロード：関数を呼び出す .children('li').each(function() { var imgPath = $(this).children('a').data('img'); preloadImage(imgPath); }); });