TAGS :,

※背景画像のフルスクリーン表示については 2012年9月19日 に新たな記事としてスクリプトを紹介していますので、こちらをご参考ください。「jQueryで背景に画像をフルスクリーンで表示するいろいろ【単一画像／スライドショー／ランダム】

昨日のエントリー「jQueryを使って背景画像をフルスクリーン表示する方法」で
背景画像をフルスクリーン化するjQueryプラグインをいくつか紹介しましたが、
ソース上にフルスクリーン画像用のタグを記載しなくてはいけなかったり、（←極力余計なタグはHTML側に記載したくない）
IEで挙動がおかしくなってしまうものなど、ちょっと希望に沿うものではなかったので
試しにSCRIPTを組んでみたのを紹介してみます。

動作的には他のプラグインと同じで、＜body＞タグ直下にフルスクリーン画像表示用のソースをjQuery側から生成し、
ブラウザのリサイズにあわせて画像の比率を変えずに拡大縮小させるタイプ。

実際のスクリプトは以下のような感じに。

<script type="text/javascript">
$(function() {
	$('body').prepend('<div id="bg_base"><div id="bg_stretch"><img src="img/bg.jpg" id="bg_img"></div></div>');

	$('#bg_base').css({left:'0px',top:'0px',position:'absolute',zIndex:'-1'});
	$('#bg_stretch').css({left:'0px',top:'0px',position:'fixed',zIndex:'-1',overflow:'hidden'});

	var self = $('#bg_img');
	selfWH = self.width() / self.height();

	$('#bg_img').bind("load",function(){
		var bgWidth = $(window).width(),
		bgHeight = bgWidth / selfWH;

		if(bgHeight < $(window).height()) {
			bgHeight = $(window).height();
			bgWidth = bgHeight * selfWH;
		}
		$("#bg_img").css({width:bgWidth,height:bgHeight});
		if (typeof callback == "function") callback();
	});

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

		if(bgHeight < $(window).height()) {
			bgHeight = $(window).height();
			bgWidth = bgHeight * selfWH;
		}
		$("#bg_img").css({width:bgWidth,height:bgHeight});
		if (typeof callback == "function") callback();
    }

});
</script>

これを実行させると以下のようになります。

サンプルはこちら

一枚（一種類）の画像をフルスクリーン表示するシンプルなもの。
SCRIPT上にフルスクリーン表示する画像のパスを記載してあります。

ロード時の画像サイズの取得とブラウザリサイズ後の画像サイズの取得で
同じ指定が入っていますが、これを纏められたらもっと綺麗なSCRIPTになると思うのですが、
今回は急ぎで作ったもので時間の関係上、これが限界。。。

SCRIPTについてのツッコミがあれば大歓迎です。

サイト内でフルスクリーン表示が必要になった際に是非。。。