Web、モバイル(スマホ・格安SIM)、ソーシャルメディア活用術、フリーランスの働き方などを綴ります!

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

21,193 view
更新日:2014年11月03日 投稿日 : 2012年12月19日
  • はてなブックマーク
  • facebook
  • twitter

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

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

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

スポンサーリンク

1,画面いっぱいに写真を表示させるには、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>前に挿入しましょう。
写真(画像)がぴったり画面いっぱい(ブラウザサイズ)に表示されます。

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

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

<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>前に挿入しましょう。
ここまでは、1,と同じです。

さて、ランダムに表示させたい写真を準備します。
写真(画像)の横幅は、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は、写真(画像)の枚数を表しております。
写真の枚数に応じて変更をして下さい。

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

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

もう1記事、読んでみませんか?

当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

  • はてなブックマーク
  • facebook
  • twitter
21,193 view 2012年12月19日

webdesignerwork 著者

フリーランスWebデザイナーとして活動をはじめて18年。全国の私を必要としてくれる方々からWordPressでのWeb制作のご依頼を頂いております。

各地のコワーキングスペースやWordPressの勉強会(WordBench/WordCamp)などに顔を出し、様々な人達とご縁をいただき刺激を受け、学んだこと感じたことを、日々のお仕事や自社メディアへの開発・配信にと繋げております。妻、子、プードル2匹と里山暮らし。

当ブログで公開されているテキスト、画像、イラストなどに関する権利は、当方に帰属します。
著作者の許諾を得ることなく複製、改変、転載、販売、出版など著作権法そのほか法律に触れる行為は禁止されております。

運営者情報

© 2004 webdesignwork ALL COPYRIGHTS RESERVED.