ウィンドウ全体に画像を表示させる jQueryプラグイン MaxImage 2を試してみた

最最近は、モニターの解像度や ppiが高くなり写真や動画をよりキレイに表示させることが可能になりました。写真や動画をページの背景全体に使うウェブサイトなども数多く見られます。それを可能にするのが jQueryプラグインの MaxImage 2です。

MaxImage 2の使い方

GitHub内にある MaxImageのページからファイルをダウンロードします。ZIPファイルを解凍して jquery.maximage.css、jquery.maximage.js、jquery.cycle.all.jsをサーバーにアップロードします。

jquery.cycle.all.jsは、複数の画像をスライドショー形式で表示させるプラグインです。jQuery Cycle Pluginの詳細はこちらを参照してください。

jQuery Cycle Plugin

HTML head

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

HTMLの head要素内に jQueryのライブラリ、MaxImage 2の CSSファイル、Javascrtipファイル、そして jQuery Cycleの JavaScriptファイルを指定します。

JavaScript

$(function(){
  
  var $maxImage = $('#maximage');
  
  //Max Image 2で使う画像をあらかじめ非表示にする
  $maxImage.hide();
  
  $maxImage.maximage({
    
    //次の画像が表示されるまでの間隔　ミリ秒単位
    cycleOptions: {timeout: 10000},
    
    //最初の画像が読み込まれた時
    onFirstImageLoaded: function(){
      
      //最初の画像をフェードインで表示させる
      $maxImage.fadeIn(1000);
    }
  });
});

今回は、背景として使う複数の画像を一定の間隔で切り替えながら表示させたいので cycleOptionsに timeoutを指定します。timeoutは次の画像が表示されるまでの間隔をミリ秒単位で指定します。onFirstImageLoadedは、最初の画像が読み込まれた時に実行するコールバック関数で任意の処理を指定します。

CSS jquery.maximage.css

div.mc-image {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
・
・
・

画像のフェードのスピードは、jquery.maximage.css内の transitionプロパティで指定されているので、1sを変更すればフェードのスピードを変えることができます。ちなみに1sだと1秒、ミリ秒で指定したい場合は msを使用します。

MaxImage 2のオプション

オプション	初期値	説明
cycleOptions	-	jQuery Cycleプラグインの設定が使用可能。
verticalCenter	true	CSSの background-positionで上下中央寄せが指定できない場合に使用。
horizontalCenter	true	CSSの background-positionで左右中央寄せが指定できない場合に使用。
backgroundSize	'cover'	CSSの background-size: coverが指定できない場合に使用。
fillElement	'window'	親コンテナにスライドショーを制約するために使用。
onFirstImageLoaded	-	最初の画像がロードされた後のコールバック。
onImagesLoaded	-	すべての画像がロードされた時のコールバック。
cssBackgroundSize	true	CSSの background-size: coverを使用しない。
cssTransitions	true	CSSの transitionを使用しない場合。