この背景画像のスライドショーのjqueryプラグインは、ズームの画像切り替えエフェクトがかっこいいので気に入っています。古くからあるプラグインですが、最近バージョンアップされたので書き留めておきます。 作者は画像を手動で切り替えれるようにギャラリーとして作成していますが、コントローラーを表示しなければ単なる背景画像のスライドショーとしても使用できます。ここでは背景画像のスライドショーとしての使い方を説明します。

1.デモ

簡単なデモを作成しましたのでよろしかったら、ここをクリックしてください。スクロールすると設定したパラメータが見れます。 コントローラーを付けたデモを作成しましたのでよろしかったら、ここをクリックしてください。

2.ダウンロード

公式ページに行って、ダウンロードしてください。 ダウンロード完了し解凍すると「jquery.mb.bgndGallery-master」フォルダーができます。

3.必要なファイル

distフォルダーの「jquery.mb.bgndGallery.min.js」とdist/cssフォルダーの「jquery.mb.bgndgallery.min.css」をそれぞれ自分のフォルダーにコピーします。

4.CSSの編集

CSSは「body」に「z-index:0」を設定し、その他は必要に応じて設定してください。


body {
	z-index:0;
	margin:0;
	padding:0;
}

5.HTMLの編集

headタグ内でプルグインのcssファイルとjqueryファイルを読み込みます。


<link href="./css/jquery.mb.bgndgallery.min.css" rel="stylesheet" media="all" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.mb.bgndGallery.min.js"></script>

headタグ内でプラグインの初期化と画像を設定します。


<script type="text/javascript">
	$(function(){
		$.mbBgndGallery.buildGallery({
			containment:"body",
			timer:500,
			effTimer:8000,
			effect:"zoom",
			autoStart:true,
			images:[
				"./images/img01.jpg",
				"./images/img02.jpg",
				"./images/img03.jpg",
				"./images/img04.jpg"
			]
		});
	});
</script>
</head>

単なるスライドショーならばbodyタグがあれば十分です。文字とかを表示したい場合はデモのソースを見てください。


<body>
	・
	・
</body>

6.オプションの説明

オプション初期値説明
containmentbodyギャラリーが挿入される要素のセレクタ名
imagesなし画像データの配列
controlsなしコントロールの要素のセレクタ名
effectfade画像切り替え方式
「fade」、「slideUp」、「slideDown」、「slideRight」、「slideLeft」、「zoom」
timer4000ms画像切り替えの間隔(ミリ秒)
effTimer5000ms画像切り替えに要する時間(ミリ秒)
rasterfalseラスタイメージのパス
autoStarttrueスライドショーのオートスタート
grayScalefalseグレイスケールで表示(未対応ぽい)
activateKeyboardtrueキーボード(カーソルキー)による画像切り替え
shufflefalse開始前に画像データをシャッフルする
preserveTopfalse画像を上に表示するかセンターに表示するか
thumbsなしサムネイル表示
{folderPath:"サムネイルのパス", placeholder:"セレクタ名"}
folderPathfalseフォルダーのパス? 何に使うの分かりません。