[jQuery]ブラウザに合わせて背景画像を拡大縮小表示できるプラグインmaxImage

jQueryプラグイン・ライブラリ

2014.10.23

ブラウザのサイズに合わせて背景画像を伸縮できるjQueryプラグイン「maxImage」のご紹介です。

1枚の背景画像を置く以外にも、複数枚の画像をフェードイン・フェードアウトで切り替え表示させることもできますので、非常に便利なプラグインではないかと思います。

maxImageファイルのダウンロード
maxImageの基本的な使い方
複数枚の背景画像をスライドショーにしてみる

maxImageファイルのダウンロード

以下のページよりmaxImageのファイルを一式ダウンロードします。
Maximage2

ブラウザに合わせて背景画像を拡大・縮小表示できるjQueryプラグイン「maxImage」

maxImageの基本的な使い方

ダウンロードしたmaxImageファイルの中からjquery.maximage.js とjquery.maximage.cssを<head>タグ内に設置します。

<link rel="stylesheet" href="./maxImage/lib/css/jquery.maximage.css" />
<script src="./jquery.min.js"></script>
<script src="./maxImage/lib/js/jquery.maximage.js"></script>
<script>
$(function(){
	$('#maximage').maximage();
});
</script>

$(function(){

$('#maximage').maximage();

});

</script>

背景として使用したい画像は、このように記述します。

<div id="maximage">
<img src="./images/img01.jpg" />
</div>

</div>

まずは1枚の画像を背景として表示させるデモを用意しました。

maxImage の基本的な使い方のデモ

複数枚の背景画像をスライドショーにしてみる

ダウンロードしたmaxImageファイル内にあるjQuery Cycle optionsを使うことで、色々なカスタマイズが可能になります。

その中でも今回は、複数枚の背景画像をスライドショーのように切り替えて表示させる方法をご紹介します。

<link rel="stylesheet" href="./maxImage/lib/css/jquery.maximage.css" />
<script src="./jquery.min.js"></script>
<script src="./maxImage/lib/js/jquery.maximage.js"></script>
<script src="./maxImage/lib/js/jquery.cycle.all.js"></script>
<script>
$(function(){
	$('#maximage').maximage({
		cycleOptions: {
			fx: 'fade',
			speed: 1000, 
			timeout: 500,
			pause: 1
		},
		onFirstImageLoaded: function(){
			jQuery('#maximage').fadeIn('fast');
		},
	});
});
</script>

$(function(){

$('#maximage').maximage({

cycleOptions: {

fx: 'fade',

speed: 1000,

timeout: 500,

pause: 1

onFirstImageLoaded: function(){

jQuery('#maximage').fadeIn('fast');

});

</script>

上記コード 9行目のfx: ‘fade’で、スライド時の効果として「フェードイン」を指定しています。
※他にもscrollUp ,shuffle などの様々なjQuery Cycleの効果を入れることができます。

10行目のspeedはスライドの早さです。

11行目のtimeoutで、次の画像にスライドで切り替える際の時間を設定できます。
※値を「0」にすると画像の切り替えが行われません。

12行目のpause:1は、オンマウスで画像を停止させる処理です。
※オンマウスによる画像停止をしたく無い場合は「1」でなく「0」を指定します。

14行目のonFirstImageLoaded: function()で、画像読み込み後の処理を入れています。

背景として使用したい複数枚の画像を、以下のように記述します。

<div id="maximage">
<img src="./images/img01.jpg" />
<img src="./images/img02.jpg" />
<img src="./images/img03.jpg" />
<img src="./images/img04.jpg" />
</div>