jquery.maximage.js:背景画像をFitさせ、かつその背景画像を切り替える方法



背景画像をブラウザにFitさせる際に使用したjsです。

 

1.ヘッダーの記述

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="js/jquery.maximage.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
		$("#idAppd").append('<img src="images/top/bg01.jpg" alt="" class="bgmaximage" />');
		$("#idAppd").append('<img src="images/top/bg02.jpg" alt="" class="bgmaximage" />');
		$("#idAppd").append('<img src="images/top/bg03.jpg" alt="" class="bgmaximage" />');
		$("#idAppd").append('<img src="images/top/bg04.jpg" alt="" class="bgmaximage" />');
		$("#idAppd").append('<img src="images/top/bg05.jpg" alt="" class="bgmaximage" />');
});
</script>

 

2.HTML記述

<img class="loader" src="images/loading.gif" alt="ローディング画像" />
<div id="idAppd"></div><!--/ココに背景&切替り画像がappendされます。-->

 

3.css記述

(切替りする画像のclass(bgmaximage)を非表示にします)

*, html, body{
	overflow:hidden;
	overflow-x:hidden;
	overflow-y:hidden;
}
.loader{
position:absolute;
z-index:9999;
width:32px;
height:32px;
top:49%;
left:48%;
}
.bgmaximage{
	display:none;
}

 

4.ページ下部に以下のJavaScriptを記述

<script type="text/javascript">
$(function(){
	jQuery('img.bgmaximage').maxImage({
    isBackground: true,
    slideShow: true,
    slideShowTitle: false,
    slideDelay: 5,
    overflow: 'hidden',
    verticalAlign:'top'
 	});
});
</script>

画像Fit(伸縮)&切替りデモ
 
ソース元:Usage Examples | MaxIage 2.0
 
サイトのトップページだけ背景画像をブラウザにフィットさせ、
伸縮&画像切替りした演出にしたいというリクエストがたまにあります。