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

jQueryプラグイン・ライブラリ

2013.09.022014.10.12

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

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

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

jQuery Fullscreenrのダウンロード
jQuery Fullscreenrの設置
画像をフルスクリーンで表示する方法
1. javascript の記述例
2. HTML、CSSの記述例
複数枚の画像をランダムで表示する方法
1. javascript の記述例
2. HTML、CSSの記述例

jQuery Fullscreenrのダウンロード

以下よりjQuery Fullscreenrのファイルをダウンロードします。
http://nanotux.com/plugins/fullscreenr/index.html

jQuery Fullscreenrの設置

jqueryファイルと一緒にjquery.fullscreenr.jsを設置します。

<script src="./jquery.min.js"></script>
<script src="./jquery.fullscreenr.js"></script>

1 2	<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>

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>

<style>

#fullscreen {

position:fixed;

z-index: -1;

}

</style>

<body>

コンテンツ部分

</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>

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});

});