• RSS

[JS]背景いっぱいの画像を表示できるjQuery プラグイン「jQuery Fullscreenr」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

<img> タグで指定した画像を背景いっぱいにフルスクリーンで表示できるjQuery プラグインが jQuery Fullscreenr です。

以前紹介したプラグイン jQuery Backstretch とほぼ同じコトが出来ますが、jQuery Fullscreenr はCSS の background-image ではなく <img> タグに画像を指定するタイプになりますので扱い方が異なります。

また jQuery Backstretch 同様、カスタマイズ次第では複数枚の画像の中からランダムで1 枚の画像を表示させることも可能ですので、今回は jQuery Fullscreenr の基本的な使い方から画像のランダム出力方法まで紹介致します。

jQuery Fullscreenr のダウンロード

以下より jQuery Fullscreenr のファイルをダウンロードします。


jQuery Fullscreenr の設置

jquery ファイルと一緒に jquery.fullscreenr.js を設置します。
<script src="./jquery.min.js"></script>
<script src="./jquery.fullscreenr.js"></script>


画像をフルスクリーンで表示する方法

まずは1 枚の画像を背景いっぱいにフルスクリーンで表示させます。

javascript の記述例

オプションの widthheight で画像のサイズを指定し、bgID でフルスクリーンで表示させる画像(<img> タグ)の ID を指定します。
<script src="./jquery.min.js"></script>
<script src="./jquery.fullscreenr.js"></script>
<script>  
var FullscreenrOptions = {
	width:1280,
	height:768,
	bgID:'#fullscreen'
};
jQuery.fn.fullscreenr(FullscreenrOptions);
</script>

HTML、CSS の記述例

続いてHTML、CSS の記述ですが、以下のようにフルスクリーンで表示させる画像の <img> タグは <body> タグ直下に置くと良いかと思います。
<style>
#fullscreen 	{
	position:fixed;
	z-index: -1;
}
</style>

<body>
<img src="画像ファイルのパス" id="fullscreen" />

コンテンツ部分

</body>
<img> タグで指定しているID(#fullscreen)に対して、position:fixedz-index:-1 を指定します。

↓以下のページで、画像をフルスクリーンで表示させてみました。
jQuery Fullscreenr で画像を一面に表示するデモ


複数枚の画像をランダムで表示する方法

今度は jQuery で画像をランダムに出力する方法 で紹介させていただいたカスタマイズと組み合わせて、複数枚の画像の中から1 枚をランダムで表示するようにしてみます。

javascript の記述例

jQuery Fullscreenr の設定は先の例と同じですが、11 行目以降に画像のランダム出力の処理を追加しました。
<script src="./jquery.min.js"></script>
<script src="./jquery.fullscreenr.js"></script>
<script>  
var FullscreenrOptions = {
	width:1280,
	height:768,
	bgID:'#fullscreen'
};
jQuery.fn.fullscreenr(FullscreenrOptions);

//画像のランダム表示
$(function() {
	var array = [
	"images/images01.jpg",
	"images/images02.jpg",
	"images/images03.jpg",
	"images/images04.jpg",
	"images/images05.jpg"
	];
 
	var l = array.length;
	var r = Math.floor(Math.random()*l);
	var imgurl = array[r];
	$("img#fullscreen").attr({"src":imgurl});
});
</script>


HTML、CSS の記述例

<img> タグの記述箇所以外は、先の例と基本的には同じです。
<style>
#fullscreen 	{
	position:fixed;
	z-index: -1;
}
</style>

<body>
<img id="fullscreen" />

コンテンツ部分

</body>

↓5 枚の画像の中から1 枚がランダムで、且つ背景いっぱいにフルスクリーンで表示されるデモです。
jQuery Fullscreenr で画像をランダム表示するデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください