• 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

コメント

コメントを残す