写真を背景にフィット＆スライドショーさせるプラグイン MaxImage 2.0 の使い方（jQuery）

MaxImage2.0
Webサイトの背景画像をブラウザサイズにフィットさせたい（フルスクリーンにしたい？）場合に活躍するのが「MaxImage2.0」です。スライドショー機能も実装されています。また、写真だけでなくhtml5でvideoも背景に出来るらしい。

必要なもの（ちょっと多め）

MaxImageは公式からではなくGitHubからダウンロードしてきます。必要なものは以下の通り。ちょっと必要なものが多めです。cycleやeasingのライブラリは、スライドショーにしなかったりオプションを使わなければ無くても動きますがエラーが出るので入れておいた方が良いかと。

<link rel="stylesheet" href="styles/jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.maximage.min.js" type="text/javascript"></script>

背景にしたい画像をhtmlに記述

任意のid内に、背景にしたい画像をimgタグで記述していきます。１枚だけでもOKです。ちなみにcssは基本的な使い方をするなら必須の記述はありません。

<div id="maximage">
	<img src="images/pic1.jpg" alt="" width="1400" height="1050" />
	<img src="images/pic2.jpg" alt="" width="1400" height="1050" />
	<img src="images/pic3.jpg" alt="" width="1400" height="1050" />
</div>

JavaScriptでの設定

オプションを使わない最も基本的な記述は以下の通りです。シンプル！

$(function(){
  $('#maximage').maximage();
});

いくつかよく使用しそうなオプションを入れると下記のようになります。cycleOptionはjQuery Cycleのオプションをそのまま使えるようです。ただこれは１枚だけ設定する場合には使わないですね。

$(function(){
  $('#maximage').maximage({
    cycleOptions: { //jQuery Cycleのオプションを書ける
      fx:'scrollHorz',
      speed: 800,
      timeout: 8000,
      prev: '#arrow_left',
      next: '#arrow_right'
    },
    onFirstImageLoaded: function(){ 
      //画像読み込み後に動かす関数を入れられる。
      $('#maximage').fadeIn('fast');
    },
    backgroundSize:“cover” 
    //coverならブラウザいっぱいに、containなら写真をフルで表示してくれます。
  });
});

以上、お役に立てれば嬉しいです。