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

Sponsored Link

jQueryプラグイン「MaxImage 2.0」

maxImage2

ウィンドウサイズいっぱいに背景画像を表示させるには便利な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(ミリ秒)。
※他のオプションはコチラを参照してください。

表示に関するオプションは
overflowはスクロールバーの表示有無。true:表示、auto:自動、hidden:隠す。
verticalAlignは画像表示の基準位置。top:画像の上辺、center:画像の中心、bottom:画像の下辺。

verticalAlignの指定は効いていませんでした。画像表示の基準位置はリンクしているjquery.maximage.cssにあるbackground-position: center center;をbackground-position: left top;などに変えると変更できます。

以上です。写真だけではなくhtml5でvideoを背景にすることができます。詳しくは公式サイトを参照して下さい。

 「MaxImage 2.0」公式サイト

関連記事

福岡のウェブデザイン事務所「ハブワークス」

HP作成・リニューアルは福岡のハブワークスまでお気軽にお問い合わせください。ウェブサイト公開後の修正・更新もお任せください。フリーランスだからできるリーズナブルな料金設定でサービスをご提供いたします。