jQueryでサムネイル画像にマウスオーバーでメイン写真を切り替えて画像リンクを変更する

ネットショップの商品ページでよく見かけるやつ。

商品のサムネイル画像を横一列に並べる。
そこにマウスを当てるとメイン画像が切り替わる。
またリンク先も自動で切り替わり、メイン写真をクリックで画像URLに飛ぶ。

実際の動作はこちら。
サムネイル写真にマウスを当てるとメイン写真が切り替わる。
写真は何枚でも掲載可能。

コード

<style type="text/css">
    #mainImage img{
        height:300px;
    }
    div#imageList ul {
        margin: 10px;
        padding: 0;
    }
    div#imageList li {
        float: left;
        list-style-type: none;
        margin-left: 5px;
    }
    div#imageList li img {
        width: 50px;
        height: 50px;
    }
    </style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     $('#imageList img').hover(function(){
        $('#mainImage img').attr('src', $(this).attr('src')); 
        $('#mainImage img').wrap($('<a>').attr('href',$(this).attr('src')));
    }); 
});
</script>

<div id="base">

    <div id="mainImage">
        <img src="sample1.jpg"/>
    </div>
 
    <div id="imageList">
        <ul>
            <li><img src="sample1.jpg"></li>
            <li><img src="sample2.jpg"></li>
            <li><img src="sample3.jpg"></li>
            <li><img src="sample4.jpg"></li>
            <li><img src="sample5.jpg"></li>
        </ul>
    </div>
</div>

だたこの方法だとサムネイル画像にマウスオーバーするとAタグのネストがどんどん深くなっていってしまう。そこで以下のように修正を加えた。

$('#mainImage img').wrap($('<a>').attr('href',$(this).attr('src')));
↓
$('#mainImage a').attr('href', $(this).attr('src'));


<div id="mainImage">
<img src="sample1.jpg"/>
</div>
↓
<div id="mainImage">
<a><img src="sample1.jpg"/></a>
</div>

これでAタグのネストが深くならないように修正できた。

使用したメソッド等


.attrメソッド 属性を設定
$('#logo').attr({
  'src': 'http://aaa.com',
  'title': 'WINGSプロジェクト'
});

wrap()の使用例
対象要素.wrap(HTML要素)
$('p').wrap('<div>');

<div>
    <p>サンプルテキスト</p>
</div>