【jQuery】連番画像を自動的に表示させる

以下のようなデザインの商品紹介ページを運営していましたが、
頻繁に商品の差し替え・追加・削除があるため、
そのたびに連番画像の並べ替えをするのがとても大変でした。

　

そこで、jQuery を使用して
左上から順番に、連番画像を自動的に表示させるようにしてみました。

（1） リストでコーディングする

<ul id="item">
<li>
        <div class="icon"><p class="no"></p></div>
        <div class="image"><a href="#"><img src="images/cushion.jpg" alt="TAMクッション（手編み）" width="168" height="168"></a></div>
        <div class="spec"><p><a href="#">TAMクッション（手編み）</a><br>￥30,000(税込)</p></div>
</li>
<li>
        <div class="icon"><p class="no"></p></div>
        <div class="image"><a href="#"><img src="images/cap.jpg" alt="TAM帽（手編み）" width="168" height="168"></a></div>
        <div class="spec"><p><a href="#">TAM帽（手編み）</a><br>￥25,000(税込)</p></div>
</li>
</ul>

※元々は、連番画像を ＜p class=”no”＞＜/p＞ 内に直接書いていました。
　

（2） jQueryのファイル* へのリンクと、以下のスクリプトを追加

■HEAD内

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
    $('ul#item li').each(function(i){
        $(this).attr('id','no' + (i+1));
    });
});
</script>

これで、「#item」 リストの 「li」 タグに、
「#no1」 からはじまる id を自動的に振っていってくれます。
↓↓↓

<ul id="item">
<li id="no1">
        <div class="icon"><p class="no"></p></div>
        <div class="image"><a href="#"><img src="images/cushion.jpg" alt="TAMクッション（手編み）" width="168" height="168"></a></div>
        <div class="spec"><p><a href="#">TAMクッション（手編み）</a><br>￥30,000(税込)</p></div>
</li>
<li id="no2">
        <div class="icon"><p class="no"></p></div>
        <div class="image"><a href="#"><img src="images/cap.jpg" alt="TAM帽（手編み）" width="168" height="168"></a></div>
        <div class="spec"><p><a href="#">TAM帽（手編み）</a><br>￥25,000(税込)</p></div>
</li>
</ul>

　

このままでは見た目が何も変わらないため、
自動的に振られた id を CSS で調整します。
　

（3） 表示させる連番画像を CSS で設定。

#item li p.no {
    width: 20px;
    height: 20px;
}
#item li#no1 p.no {
    background: url(../images/icon_no1.gif) no-repeat;
}
#item li#no2 p.no {
    background: url(../images/icon_no2.gif) no-repeat;
}

これで、HTMLには何も書かなくても
上から順に自動的に連番画像を表示してくれます。

商品点数が多く、更新頻度の高いページにはとっても便利です。
　

※jQuery のファイルはこちらからダウンロードください。
http://jquery.com/