jQueryで背景に画像をフルスクリーンで表示するいろいろ【単一画像／スライドショー／ランダム】

2012/09/19 TAGS :jQuery, スライド, フルスクリーン

今ではあちこちで見かけるようになった
Webページでの背景全体の画像フルスクリーン表示。

単純に一枚の画像を表示するパターンや
複数画像を切り替えて背景でフルスクリーンスライドショーにしたり
ランダムで表示する画像を切り替えたり
などなど、魅せ方はさまざまですが、
これらをjQueryを使ってできるだけシンプルなスクリプトで
実装ができないか試してみたので紹介してみます。

jQueryで背景に画像をフルスクリーンで表示するいろいろ

今回は、単一画像／スライドショー／ランダムの全部で3パターン紹介しますが、
HTMLとCSSは全て同じ構成になりますので
先にこの２つのソース構成について。

まずはHTMLから。

◆HTML
<div id="container">

<div id="contents">
<div id="wrapper">
<h1>jQuery FullScreen BackGround IMG</h1>

<p>ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。</p>

<p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p>

<p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p>

<h2>COPYRIGHT &copy; <a href="https://black-flag.net/">BLACKFLAG.NET</a> ALL RIGHTS RESERVED.</h2>
</div><!--/#wrapper-->
</div><!--/#contents-->

</div><!--/#container-->

実際にフルスクリーンで画像を表示する部分のタグはJS側で生成するので
HTMLにはページ上に表示するコンテンツ要素の内容を記述しておきます。

コンテンツ要素には必ず全体を囲うブロック要素が必要になります。
（サンプルでは「#contents」）

これに対してのCSSは以下。

◆CSS
#container {
	width: 100%;
	text-align: center;
}

/* #fullbg_stretch
--------------------------- */
#fullbg_stretch  img {
	visibility: hidden;
}

/* #contents
--------------------------- */
#contents {
	margin: 50px auto;
	width: 800px;
	color: #000;
	text-align: left;
	position: relative;
	z-index: 99;
}

#contents #overlaybg {
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	position: absolute;
}

#contents #wrapper {
	width: 100%;
	text-align: left;
	position: relative;
}

#contents p {
	padding: 0 15px 30px 15px;
	position: relative;
}

背景で表示する画像「#fullbg_stretch img」は
CSS側ではひとまず非表示にしておきます。

コンテンツ要素全体を囲うブロック要素「#contents」には
「position: relative;」を必ず入れておく必要があります。

他はほとんどがサンプル画面のレイアウトを構成するものになっているので
その都度カスタマイズしていただく必要があるかと思います。

そしてここから先がフルスクリーン表示のスクリプトについて、
まずは単一画像で表示するパターンから。

単一画像

まずは動作のサンプルから。
下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます）

【単一画像】jQueryで背景に画像をフルスクリーンで表示するサンプルを別枠で表示

単一画像が背景にフルスクリーン表示されます。
これを実装するスクリプトは以下の様になっています。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
	$.ajaxSetup({cache:false});

	$('body').prepend(
		'<div id="fullbg_base"><div id="fullbg_stretch">' +
		'<img src="img/photo1.jpg">' +
		'</div></div>'
	);

	$(window).load(function(){
		var fadeSpeed = 1000; // フェード表示させない場合は「0」

		var baseId = '#fullbg_base';
		var stretchId = '#fullbg_stretch';
		var stretchImg = $(stretchId).children('img');

		$(baseId).css({top:'0',left:'0',position:'absolute',zIndex:'-1'});
		$(stretchId).css({top:'0',left:'0',position:'fixed',zIndex:'-1',overflow:'hidden'});
		$(stretchImg).css({top:'0',left:'0',position:'absolute',opacity:'0',visibility:'visible'}).stop().animate({opacity:'1'},fadeSpeed,'linear');
		selfWH = stretchImg.width() / stretchImg.height();

		function bgAdjust(){
			var bgWidth = $(window).width(),
			bgHeight = bgWidth / selfWH;

			if(bgHeight < $(window).height()){
				bgHeight = $(window).height();
				bgWidth = bgHeight * selfWH;
			}
			$(stretchId).css({width:bgWidth,height:bgHeight});
			$(stretchImg).css({width:bgWidth,height:bgHeight});
		}
		bgAdjust();
		$(window).bind('load resize',function(){bgAdjust()});

		// コンテンツ部分の背景オーバーレイ
		var contentsHeight = $('#contents').height();
		$('#contents').prepend('<div id="overlaybg"></div>');
		$('#overlaybg').css({height:(contentsHeight),opacity:'0.3'});
	});
});
</script>

スクリプト8行目～10行目で画像を表示するブロック要素IDを生成しています。
9行目の＜img＞タグ部分が使用する画像のパスになるので
画像ファイルの格納先が変わる場合などはここで変更するようになります。

14行目では画像がフェードインする際の時間設定ができますが
フェードインさせたくない場合は「0」の値を入れます。

表示後はブラウザウィンドウサイズと
フルスクリーン表示する画像の比率を計算して
全体の表示サイズを調整しています。
※ウィンドウサイズをリサイズしても同じ処理を実行させています。

背景の単一画像フルスクリーン表示は
この様な感じで実装できます。

続いてスライドショーパターン。

スライドショー

まずは動作のサンプルから。
下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます）

【スライドショー】jQueryで背景に画像をフルスクリーンで表示するサンプルを別枠で表示

フルスクリーンで表示された画像（サンプルでは5枚）が
クロスフェードして切り替わります。

これを実装するスクリプトは以下の様になっています。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
	$.ajaxSetup({cache:false});

	$('body').prepend(
		'<div id="fullbg_base"><div id="fullbg_stretch">' +
		'<img src="img/photo1.jpg">' +
		'<img src="img/photo2.jpg">' +
		'<img src="img/photo3.jpg">' +
		'<img src="img/photo4.jpg">' +
		'<img src="img/photo5.jpg">' +
		'</div></div>'
	);

	$(window).load(function(){
		var fadeSpeed = 1500;
		var switchDelay = 5000;

		var baseId = '#fullbg_base';
		var stretchId = '#fullbg_stretch';
		var stretchImg = $(stretchId).children('img');

		$(baseId).css({top:'0',left:'0',position:'absolute',zIndex:'-1'});
		$(stretchId).css({top:'0',left:'0',position:'fixed',zIndex:'-1',overflow:'hidden'});
		$(stretchImg).css({top:'0',left:'0',position:'absolute',visibility:'hidden'});
		selfWH = stretchImg.width() / stretchImg.height();

		function bgAdjust(){
			var bgWidth = $(window).width(),
			bgHeight = bgWidth / selfWH;

			if(bgHeight < $(window).height()){
				bgHeight = $(window).height();
				bgWidth = bgHeight * selfWH;
			}
			$(stretchId).css({width:bgWidth,height:bgHeight});
			$(stretchImg).css({width:bgWidth,height:bgHeight});
		}
		bgAdjust();
		$(window).bind('load resize',function(){bgAdjust()});

		$(stretchId).children('img').css({visibility:'visible',opacity:'0'});
		$(stretchId + ' img:first').stop().animate({opacity:'1',zIndex:'10'},fadeSpeed);

		setInterval(function(){
			$(stretchId + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(stretchId);
		},switchDelay);

		// コンテンツ部分の背景オーバーレイ
		var contentsHeight = $('#contents').height();
		$('#contents').prepend('<div id="overlaybg"></div>');
		$('#overlaybg').css({height:(contentsHeight),opacity:'0.3'});
	});
});
</script>

スクリプト9行目～13行目で表示する画像＜img＞タグを生成しており
表示する枚数を変更する際には、この部分で記述している＜img＞タグ部分を増減させます。

スライドショー動作スクリプトは、当ブログ別記事の
「jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法」の
記事で紹介している内容とほぼ同じ構成になっています。

ウィンドウサイズとフルスクリーン表示する画像の比率を計算する部分は
単一画像パターンの時と同じ構成になっています。

背景フルスクリーンでのスライドショーパターンは
この様な感じで実装することができます。

最後はランダム表示パターン。

ランダム

まずは動作のサンプルから。
下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます）

【ランダム】jQueryで背景に画像をフルスクリーンで表示するサンプルを別枠で表示

サンプルでは5枚の画像をリロードする度にランダムで表示を切り替えて表示しています。

これを実装するスクリプトは以下の様になります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
	$.ajaxSetup({cache:false});

	var maxNum = 5; // 最大枚数
	var rdm = parseInt(Math.random()*(maxNum))+1;

	$('body').prepend(
		'<div id="fullbg_base"><div id="fullbg_stretch">' +
		'<img src="img/photo' + rdm + '.jpg">' +
		'</div></div>'
	);

	$(window).load(function(){
		var fadeSpeed = 1000; // フェード表示させない場合は「0」

		var baseId = '#fullbg_base';
		var stretchId = '#fullbg_stretch';
		var stretchImg = $(stretchId).children('img');

		$(baseId).css({top:'0',left:'0',position:'absolute',zIndex:'-1'});
		$(stretchId).css({top:'0',left:'0',position:'fixed',zIndex:'-1',overflow:'hidden'});
		$(stretchImg).css({top:'0',left:'0',position:'absolute',opacity:'0',visibility:'visible'}).stop().animate({opacity:'1'},fadeSpeed,'linear');
		selfWH = stretchImg.width() / stretchImg.height();

		function bgAdjust(){
			var bgWidth = $(window).width(),
			bgHeight = bgWidth / selfWH;

			if(bgHeight < $(window).height()){
				bgHeight = $(window).height();
				bgWidth = bgHeight * selfWH;
			}
			$(stretchId).css({width:bgWidth,height:bgHeight});
			$(stretchImg).css({width:bgWidth,height:bgHeight});
		}
		bgAdjust();
		$(window).bind('load resize',function(){bgAdjust()});

		// コンテンツ部分の背景オーバーレイ
		var contentsHeight = $('#contents').height();
		$('#contents').prepend('<div id="overlaybg"></div>');
		$('#overlaybg').css({height:(contentsHeight),opacity:'0.3'});
	});
});
</script>

スクリプト7行目の「var maxNum」に使用する画像の最大枚数の値を入れて
画像に対してはファイル名に命名規則を付けて最後に1～5の数値を入れるようにしています。
（サンプルでは「photo1.jpg」～「photo5.jpg」）
そしてこの数値がランダムで割り当てられることで画像を表示しています。

背景フルスクリーンでのランダム表示パターンは
この様な感じで実装することができます。

以上が背景に画像をフルスクリーンで表示する3パターンの実験紹介になります。

3パターンともにスクリプト開始すぐに
「$.ajaxSetup({cache:false});」の記述が入っていますが
IEではサイズ取得したもろもろの値がajaxキャッシュされてしまうことで
ページをリロードなどした際に比率の計算がおかしくなってしまうので
ajaxキャッシュするのを抑制するために入れてあります。
（参考：IEがajaxキャッシュするのを抑制 – はらぐろブログラマン）

加えて、3パターン共にスクリプトの下部に「コンテンツ部分の背景オーバーレイ」として
コンテンツ表示部分に透過した背景色オーバーレイの指定を入れてありますが
この部分は背景にフルスクリーンで画像を表示する動作自体には影響しないものになっているので
実装の際に不必要な場合は、4行共に削除してしまっても問題ないかと思います。

背景に大きな画像を敷く際には、重さの負荷など
いろいろと構成に気をつけなくてはいけないところもありますが
ダイナミックな見た目を表現できる手法のひとつかと思っています。

jQueryで背景に画像をフルスクリーンで表示する際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから