てるてるブログ

てるてるぼうずの日常やらお勉強やら

背景画像のスライドショー「bgStretcher 2011」

Posted on | 7月 18, 2012 | No Comments

背景画像をスライドショー表示してくれるjQueryプラグイン「bgStretcher 2011」。

以前投稿した背景画像のスライドショーをjsライブラリ「jQuery maxImage plugin」と似た感じですね。
こちらの方が結構サクサク動く感じ。
設置も楽そうだし。

シンプルバージョンで「bgStretcher」もあるので、背景だけをちょこっとスライドショーさせたいならこちらの方が楽かもしれないですね。。
コントロール出来る要素が増えてるのとスライドする画像をボタンでコントロール可能かどうかの違い…かな?

「bgStretcher 2011」の設置メモ↓

まずはheadタグ内でjsファイルとCSSファイルの呼び出しを。

<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="bgstretcher.js"></script>
<link rel="stylesheet" href="bgstretcher.css" />

次にbgStretcherの設定など

<script type="text/javascript">
$(document).ready(function(){
$('BODY').bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], 
imageWidth: 1024, 
imageHeight: 768,
});
});
</script>

画像のサイズは特に指定しなくても動くみたいです。

↓はページ送りのボタンを付けてみたサンプルページ。

DLページのデモ画面の方がキレイですけどね。

ページ全体の背景画像ではなくdivで囲んだボックスの背景をスライドショーさせるなんて事も可能みたいです。

これだと普通にページに組み込む形のスライドショーで使えそうです。

トラックバックURL:

Comments

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin