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

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

スポンサード

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

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

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

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 の記述例

オプションの width と height で画像のサイズを指定し、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:fixed、z-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 で画像をランダム表示するデモ

スポンサード