ウィンドウサイズいっぱいの背景画像をスライド表示するjQueryプラグイン「MaxImage 2.0」

2014年08月22日

jQueryプラグイン「MaxImage 2.0」

ウィンドウサイズいっぱいに背景画像を表示させるには便利なjQueryプラグインです。画面サイズを自由に変えると、それに合わせて画像表示をいい具合に調整してくれます。オプション設定することでスライド表示することも可能です。

表示サンプル

使用する「MaxImage 2.0」をダウンロードと必要ファイルの読み込み

必要ファイルはGitHubで公開されているので、そこからダウンロードします。ダウンロードしたzipフォルダを解凍して、必要なファイルを以下の例の様に記述して読み込みます。

<link rel="stylesheet" href="css/jquery.maximage.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/jquery.maximage.min.js" type="text/javascript"></script>

htmlに背景用画像を記述する

背景用画像を囲むdivタグにはidもしくはclass名を指定します。今回はid名をmaximageにしています。

<div id="maximage">
  <img src="images/sample1.jpg" alt="sample1" />
  <img src="images/sample2.jpg" alt="sample2" />
  <img src="images/sample3.jpg" alt="sample3" />
</div>

JavaScriptの設定を記述する

記述はシンプルです。

$(function(){
　$('#maximage').maximage({
cycleOptions: { //スライドの動作に関するオプションを記述
      fx:'scrollLeft',
      speed: 800,
      timeout: 3000,
    },
　　　//表示に関するオプションを記述
    　overflow: 'auto',
  });
});

スライドの動作に関するオプションは
・fxは切り替わり効果。デフォルトはfade。他にはscrollTop,scrollRight,scrollDown,scrollLeft。
・speedは効果の時間。デフォルトは1000(ミリ秒)。
・timeoutは次の画像に切り替わるまでの時間。デフォルトは4000(ミリ秒)。
※他のオプションはコチラを参照してください。