ブラウザのサイズに合わせて背景画像を伸縮できるjQueryプラグイン「maxImage」のご紹介です。
1枚の背景画像を置く以外にも、複数枚の画像をフェードイン・フェードアウトで切り替え表示させることもできますので、非常に便利なプラグインではないかと思います。
maxImageファイルのダウンロード
以下のページよりmaxImageのファイルを一式ダウンロードします。Maximage2
maxImageの基本的な使い方
ダウンロードしたmaxImageファイルの中からjquery.maximage.js とjquery.maximage.cssを<head>タグ内に設置します。|
1 2 3 4 5 6 7 8 |
<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> |
背景として使用したい画像は、このように記述します。
|
1 2 3 |
<div id="maximage"> <img src="./images/img01.jpg" /> </div> |
まずは1枚の画像を背景として表示させるデモを用意しました。
maxImage の基本的な使い方のデモ
複数枚の背景画像をスライドショーにしてみる
ダウンロードしたmaxImageファイル内にあるjQuery Cycle optionsを使うことで、色々なカスタマイズが可能になります。その中でも今回は、複数枚の背景画像をスライドショーのように切り替えて表示させる方法をご紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
上記コード 9行目のfx: ‘fade’で、スライド時の効果として「フェードイン」を指定しています。
※他にもscrollUp ,shuffle などの様々なjQuery Cycleの効果を入れることができます。
10行目のspeedはスライドの早さです。
11行目のtimeoutで、次の画像にスライドで切り替える際の時間を設定できます。
※値を「0」にすると画像の切り替えが行われません。
12行目のpause:1は、オンマウスで画像を停止させる処理です。
※オンマウスによる画像停止をしたく無い場合は「1」でなく「0」を指定します。
14行目のonFirstImageLoaded: function()で、画像読み込み後の処理を入れています。
背景として使用したい複数枚の画像を、以下のように記述します。
|
1 2 3 4 5 6 |
<div id="maximage"> <img src="./images/img01.jpg" /> <img src="./images/img02.jpg" /> <img src="./images/img03.jpg" /> <img src="./images/img04.jpg" /> </div> |
以下に、フェードインによるスライドショーのデモを用意しました。
maxImage による複数枚の背景画像のスライドショーデモ
コメント