ブラウザの幅に合わせて画面いっぱいに画像を表示してくれるjQueryプラグインjQuery Backstretch。
1枚だけの背景画像をブラウザ幅に合わせてフルスクリーン表示できるのはもちろん、カスタマイズ次第では複数枚の画像をアクセス毎にランダムで切替表示することもできる便利なプラグインです。
jQuery Backstretchのダウンロード
以下のページよりjQuery Backstretchのファイルをダウンロードします。http://srobbin.com/jquery-plugins/backstretch/
jQuery Backstretchの設置
jqueryファイルと一緒にjquery.backstretch.min.jsを設置します。|
1 2 3 4 5 |
<script src="./jquery.min.js"></script> <script src="./jquery.backstretch.min.js"></script> <script> $.backstretch('./画像ファイルのパス'); </script> |
背景画像のパスを$.backstretch('');内に設定すれば、以下のデモページのように画像をブラウザ幅に合わせてフルスクリーン表示させることができます。
jQuery Backstretch による単体画像の背景設置デモ
背景画像をランダムで出力する
ちょっとカスタマイズするだけで、複数枚の画像をアクセス毎にランダム表示させることもできます。|
1 2 3 4 5 6 7 8 9 10 |
<script src="./jquery.min.js"></script> <script src="./jquery.backstretch.min.js"></script> <script> $(document).ready(function(){ bgimgsum=5; randomnum = Math.round( Math.random()*(bgimgsum-1))+1; bgimgurl=( $.backstretch('./画像のフォルダ/images0'+randomnum+'.jpg')); $('body').css('background-image',('url("'+bgimgurl+'")')); }); </script> |
画像全部で5枚（bgimgsum=5）あるとして、それらをランダム表示する処理を入れています。
先の単体画像の時と同様、$.backstretch('')に画像ファイルのパスを入れるのですが、ランダム表示させる画像はどこか1箇所のフォルダに集めておくのがベストです。
また randomnumには数字が入ってくるので、画像名「images01.jpg」「images02.jpg」…のように連番にしておくと良いと思います。
あとは画像をランダム表示させる要素（上記例では body）に対してbackground-imageのプロパティを追加します。
↓こんな感じで、アクセス毎に背景画像がランダムで切り替わります。
背景画像をランダムで出力するデモ
コメント