jQueryで画面いっぱいに背景写真を表示したり、複数の写真をランダムで表示させる方法

パソコン（ブラウザ）の画面いっぱいに背景画像を表示する方法を、jQueryを利用して実装する方法を紹介致します。

２ではランダム表示の実装を行います。
背景に写真（画像）を使ったホームページはFLASHサイトをはじめ多くのサイトがありますが、jQueryを利用してHTMLサイトでも大きくて綺麗な写真（画像）をパソコン（ブラウザ）の画面に合わせてサイトの背景に表示が可能です。

見た目にもインパクトがあってとても印象的！

１，画面いっぱいに写真を表示させるには、backstretch.min.jsを設置

下記のURLよりjQueryをダウンロードします。
jQuery Backstretch

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src="jquery.backstretch.min.js"></script>
<script>
$.backstretch("sample.jpg");
</script>

”sample.jpg（任意）”という写真（画像）を用意して、上記をHTMLの</head>前に挿入しましょう。
写真（画像）がぴったり画面いっぱい（ブラウザサイズ）に表示されます。

２，背景写真をランダムに切り替えて表示する方法

さて次に、画面いっぱいに表示させた写真（画像）をランダムに切り替える方法を実装をします。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="common/js/jquery.backstretch.min.js"></script>

backstretch.min.jsをダンロード後、上記をHTMLの</head>前に挿入しましょう。
ここまでは、１，と同じです。

さて、ランダムに表示させたい写真を準備します。
写真（画像）の横幅は、1920px以上はあった方がどのディスプレイサイズ（ブラウザサイズ）でも綺麗に表示されると思います。
次に、肝心である写真（画像）のファイル名を編集しましょう。
写真の調整後は、1.jpg、2.jpg、3.jpg、4.jpg、5.jpg、6.jpg、7.jpgとなるような数値（昇順）でのファイル名にしましょう。

<script type="text/javascript">
$(document).ready(function(){
bgImageTotal=7; randomNumber = Math.round(Math.random()*(bgImageTotal-1))+1; imgPath=($.backstretch('common/js/'+randomNumber+'.jpg')); $('body').css('background-image', ('url("'+imgPath+'")'));});
</script>

次に上記のジャバスクリプトを挿入しましょう。

写真（画像）は、backstretch.min.jsと同じフォルダ内に格納しておくのが無難です。
‘common/js/’は、backstretch.min.jsと写真が格納されている階層場所を示すソースです。
「bgImageTotal=7」の7は、写真（画像）の枚数を表しております。
写真の枚数に応じて変更をして下さい。

以上で、ページを開く度にランダムに写真（画像）が表示されます。
是非、お試し下さい。

■実装サイト
歯医者 東大阪