タイトルからはわかりにくいかもしれない。

たとえば、コーディングでこういうデザインを組むとする。

neko1

写真は入れ替わるため、ボックスを背景において、
そのなかに写真を4つ並べることになると思う。

こんなページがいっぱい出てくる時、あるページでは、
↓こんなだったら。。

neko2

さっきの背景は使えないので、今度は小さい背景をつくって
写真を3つ並べることになると思う。


さて、静的ページだけのサイトなら手動でやってもいいんだけど、
これが動的サイトのコーディングだったのでクマってしまった。
(ie6対応だったので、css3たちは使えない)


そこで、写真の数に応じて、背景を変える、ということがjQueryでできないかなと
やってみたら、すぐに出来たので、ここに書いておきます。

jsはこんな感じ

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
imgcount = $('.nekobox img').length;
if(imgcount == 4){
$(".nekobox").css("background-image","bigbox.png");
}
else if(imgcount == 3){
$(".nekobox").css("background-image","smallbox.png");
}
});
</script>


imgcount変数に<div class="nekobox">内のimgの数を取得して代入。

imgcountが4のときは、nekoboxの背景はbigbox.png

imgcountが3のときは、nekoboxの背景はsmallbox.png


cssはこんな感じ

.nekobox{
background:url(bigbox.png) no-repeat left top;
width:400px;
height:100px;
}
 

htmlはこんな感じ。 

<div class="nekobox">
<img src="neko1.jpg" />
<img src="neko2.jpg" />
<img src="neko3.jpg" />
</div>

画像が3つのときも4つのときも、
divのclass="nekobox"を変えなくてもいけるので、
動的サイトのときなどに気をつかってやってあげると喜ばれる。