【jQuery】背景画像をブラウザのウィンドウサイズに最適化!

Ads by Google

便利なjQueryプラグイン[jQuery BackStretch]を使うと、背景に指定した画像をブラウザのウィンドウサイズに最適化してくれて、さらにスライドショーにも対応し、複数の画像を順番に表示してくれます。

簡単に設定できることはもちろん、背景画像を最後に表示させるので、メインのコンテンツが表示されるまで待つ必要がないのが特徴です。

まずは「Backstretch」のページからファイルを一式ダウンロードします。

<head>〜</head>内でjQuery本体とBackstretchを読み込みます。

<script src="../jquery.js"></script>
<script src="../jquery.backstretch.js"></script>

続いてBackstretchの設定です。

<script>
$.backstretch("sample01.jpg");  // 背景にする画像を指定
</script>

1つの画像を背景に設定する場合は以上です。これで背景に画像が設定され、ウィンドウズサイズによって画像の大きさが変わります。

基本的にBackstretch自体はスライドショーに対応していませんが、次のようなコードを書くことで簡単にスライドショーが可能です

<script>
var images = [
"Aerial01.jpg",
"Aerial02.jpg",
"Aerial03.jpg",
"Aerial04.jpg",
"Aerial05.jpg"
];
// 指定画像をプリロードする
$(images).each(function(){
	$('<img/>')[0].src = this;
	});
	var index = 0;
	// 背景をコール。下記の場合、500ミリ秒で呼び出します。
	$.backstretch(images[index], {speed: 300});
	setInterval(function() {
		index = (index >= images.length - 1) ? 0 : index + 1;
		$.backstretch(images[index]);
}, 5000);
</script>

以下、実装したサンプルをどうぞ。

jQuery BackStretch:サンプル

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です