※背景画像のフルスクリーン表示については 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についてのツッコミがあれば大歓迎です。

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryを使って背景画像をフルスクリーン表示する方法【その2】

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR