タイトルからはわかりにくいかもしれない。
たとえば、コーディングでこういうデザインを組むとする。
写真は入れ替わるため、ボックスを背景において、
そのなかに写真を4つ並べることになると思う。
こんなページがいっぱい出てくる時、あるページでは、
↓こんなだったら。。
さっきの背景は使えないので、今度は小さい背景をつくって
写真を3つ並べることになると思う。
さて、静的ページだけのサイトなら手動でやってもいいんだけど、
これが動的サイトのコーディングだったのでクマってしまった。
(ie6対応だったので、css3たちは使えない)
そこで、写真の数に応じて、背景を変える、ということがjQueryでできないかなと
やってみたら、すぐに出来たので、ここに書いておきます。
jsはこんな感じ
imgcount変数に<div class="nekobox">内のimgの数を取得して代入。
imgcountが4のときは、nekoboxの背景はbigbox.png
imgcountが3のときは、nekoboxの背景はsmallbox.png
cssはこんな感じ
htmlはこんな感じ。
画像が3つのときも4つのときも、
divのclass="nekobox"を変えなくてもいけるので、
動的サイトのときなどに気をつかってやってあげると喜ばれる。
たとえば、コーディングでこういうデザインを組むとする。
写真は入れ替わるため、ボックスを背景において、
そのなかに写真を4つ並べることになると思う。
こんなページがいっぱい出てくる時、あるページでは、
↓こんなだったら。。
さっきの背景は使えないので、今度は小さい背景をつくって
写真を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"を変えなくてもいけるので、
動的サイトのときなどに気をつかってやってあげると喜ばれる。