画面いっぱいの背景画像をスライドショウするjQueryプラグイン

2010年4月10日

画面サイズにフィットして伸縮する背景画像を、スライドショウするjQueryプラグインの紹介。

フルFlashサイトなどで見かける、画面サイズに合わせて画面いっぱいに画像が表示されるアレ。それにスライドショウ機能が付いたjQueryプラグインを、自分のサイトで使ってみました。

動作サンプル

www.daichifive.com

自分のサイトで使ってみました。なんか、いいカンジでしょ？ちなみに、使用している写真は、足成さんでダウンロードしました。

追記
上記で紹介している僕のサイトのソースコードをまるまる流用する人が増えています。分からないからといって、CSSファイルやデザインまで全部パクるのはやめましょう。head内のアクセス解析用コードまでそのまま使う人が多いのもホント焦る。僕のGoogleAnalyticsの結果に知らないタイトルのページがたくさん入ってきてます。

解説ページとダウンロード

maxImage Scaling Plugin 解説ページ

maxImage Scaling Plugin ダウンロードはこちら

設置例

自分のサイトでの設置例を紹介します。背景＋スライドショウとして動作させています。まずは、headタグ内でmaxImage Scalingを読み込みます。jQueryのプラグインですので、jQueryも読み込んでください。

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.maximage.js'></script>

bodyタグ内に、背景として表示させたい画像を配置します。画像は何枚あってもOKです。その際、同じclass名を付けておきます。あとは、読み込み中に表示させる画像を、class名をloaderとして配置しておきます。

<img src="img/loader.gif" alt="loading" class="loader" />
<img src="img/bg01.jpg" alt="" class="bgimage" />
<img src="img/bg02.jpg" alt="" class="bgimage" />
<img src="img/bg03.jpg" alt="" class="bgimage" />
<img src="img/bg04.jpg" alt="" class="bgimage" />

スタイルシートで、画像を非表示＆読み込み中画像の配置位置を調整します。

img.bgimage {
    display: none;
}
img.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -12px 0 0 -12px;
}

maxImage Scalingを発動させるスクリプトを記述します。

<script type="text/javascript">
    $(function(){
        $('img.bgimage').maxImage({
            isBackground: true,
            slideShow: true,
            position: ('absolute'),
            verticalAlign: 'bottom',
            horizontalAlign:'right',
            slideDelay: 8, 
            slideShowTitle: false,
            maxFollows: 'height'
        });
    });
</script>

設定はお好みで調整してください。IE6で画像の比率がおかしくなることがあったので、サポートされてない？少し前のバージョンでは、ブラウザのサイズを変えても背景画像のリサイズがされない不具合がありましたが、最新のバージョンでは問題なくいけますね！

横スクロールバーが出る場合

はじめ、どうしても横スクロールバーが出てしまったので、cssでスクロールバーを消してましたが、verticalAlignとかhorizontalAlignとかを指定したら、横スクロールバーが出なくなりました。なんか、よくわかんないね。ちなみに、cssでスクロールバーを消す場合は以下のようにやってました。

<body>
<div id="outline">
 
内容
 
</div>

背景画像

</body>

html {
    overflow: hidden;
    height: 100%;
}
 
body {
    height: 100%;
}
 
#outline {
    height: 100%;
    overflow: auto;
}

htmlのスクロールバーを消して、変わりにdiv要素でスクロールバーを表示させるようにします。height:100%;は、念のため書いてるけど、しっかり検証したわけではないので、もしかしたら必要ないかも。まあ、多少不要なものがあっても問題はないでしょう・・・。

アマゾンのサーバでエラーが起こっているかもしれません。
一度ページを再読み込みしてみてください。

5年前は、JavaScriptなんて絶対に使うもんかって思ってたのに！