ウェブ、ショウジン

jQueryプラグインのBACKSTRETCHを使ってブラウザウィンドウサイズに合わせて背景画像を表示させる

2012-4-13
Category
jQuery

背景画像をブラウザのウィンドウいっぱいに表示(ウィンドウサイズに合わせて拡大縮小)させたい場合

maxImage Scaling Plugin
自分でやってみたmaxImage Scalingのデモ画面

よりも

BACKSTRETCH

のほうがよさそう。

自分でやってみたBACKSTRETCHのデモ画面

軽量(圧縮されたmin版で2Kほど)なのと、maxImageのような
フロントでアクティブじゃなくなった場合のChromeでの
表示の不具合(アニメーションの切り替え具合がおかしくなる)が生じないので。

以下、ざっと使い方。

単一の画像を背景ピッタリに表示と、さらにそれをスライドショーで展開と
いった使い方もできて、単一画像なら

<script type="text/javascript" language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.backstretch.min.js"></script>

こうしてjQuery本体とbackstretchを読み込んだ上で

<script type="text/javascript">
$.backstretch("./img/background.jpg");
</script>

このように画像ファイルへのパスを指定するだけでオーケー。

スライドショー展開で複数画像をアニメーションで切り替えて表示する場合は

<script type="text/javascript" language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.backstretch.min.js"></script>
<script type="text/javascript">
// 画像の配列を作成
var images = [
    "./img/splash/top1.jpg",
    "./img/splash/top2.jpg",
    "./img/splash/top3.jpg"
];

// 指定画像をプリロード
$(images).each(function(){
  $('<img/>')[0].src = this;
});

var index = 0;

// 背景画像の呼び出し(この場合700ミリ秒で呼び出し)
$.backstretch(images[index], {speed: 700});

setInterval(function() {
   index = (index >= images.length - 1) ? 0 : index + 1;
   $.backstretch(images[index]);
}, 5000); // この数値は画像が切り替わる間隔を指定
</script>

こんなふうに配列を用意したうえでゴニョゴニョすると。
画像の呼び出し、切り替えタイミングも指定可能。

他にもサイトのほうでDEMOがあって使い方が解説されている。

自動で画像切替ではなくて、特定の要素をクリックした際に
背景画像を切替えるという使い方もできるらしい。(Attach Backstretch to click eventsがそれかな)

とりあえず今回はこれでいけそうだけど、他にもかちびとさんのところで
いろいろ紹介されていた。

jQueryで背景画像をフルスクリーン表示してスライドショーに出来るやつ色々

backstretchについては

jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCH

で知り、参考にさせてもらいました。ありがとうございます。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿