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

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

スポンサード

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

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

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

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>