MaxImage2は、背景全体に画像を表示させることができるjQueryプラグインです。背景画像をスライドショーにすることも可能です。
本記事では、MaxImage2の導入方法について解説します。
実際にMaxImage2を導入したデモページを用意したので、動きは以下よりご確認いただければと思います。
デモページではスライドショーも実装しています。
ステップ1. MaxImage2のダウンロード&設置
まずはGitHubからMaxImage2をダウンロードして、サーバーに設置しましょう。
必要なファイルは、以下の通りです。
- lib/css/jquery.maximage.min.css
- lib/js/jquery.maximage.min.js
ステップ2. HTMLで画像のマークアップ
以下のように、背景全体に表示させたい画像をマークアップします。
<div id="maximage"> <img src="background.jpg"> </div>
idはMaxImage2を呼び出す時に使用します。
ステップ3. CSSのロード
以下を<head>～</head>内に記述して、CSSをロードします。
<link rel="stylesheet" href="jquery.maximage.min.css" type="text/css" />
ファイルパスは適宜変更してください。
ステップ4. jQueryとMaxImage2のロード
最後にjQueryとMaxImage2を呼び出します。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.maximage.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
jQuery('#maximage').maximage();
});
</script>
記述場所は</body>の直前でOKです。こちらもファイルパスは適宜変更してください。
ここまでできたら、画像が背景全体に表示されるようになります。
スライドショーを実装する
背景画像をスライドショーにしたい場合は、jquery.cycle.all.min.jsを追加する必要があります。
ダウンロードしたMaxImage2の中から、lib/js/jquery.cycle.all.min.jsをサーバーに設置してロードしましょう。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.maximage.min.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
jQuery('#maximage').maximage();
});
</script>
スライドショーなので、画像も複数マークアップします。
<div id="maximage"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> <img src="img4.jpg"> </div>
img1.jpgからimg4.jpgまでが、背景全体を使ってスライドするようになります。
あとがき
実装も簡単で、使いやすいプラグインだと思います。
背景全体に画像を表示させるとかなりのインパクトがありますよね。実装を検討している方は、ぜひ試してみてください。