• かちびと.net

    背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCHのご紹介です。シンプルでよさそうです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

同じようなの沢山あるのですが、
軽量って言葉に弱い。背景一杯
に画像を表示、スライドショー
化も可能なjQueryプラグインで
す。圧縮版なら2KBほどですの
で導入しやすいですね。

背景一杯に表示出来るやつでスライドショーにも対応で軽量です。圧縮して2KBくらい。しないで5KBくらいです。

BACKSTRETCH


似たようなのは一杯あるので他にも探してみてください。個人的にはこれはカスタマイズしやすそうだったのでちょっと使ってみようかなと思います。

IE7でもOK。6だとfixedが効かないので、ちょっとアレです。

コード

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="jquery.backstretch.min.js"></script>
 <script>
	$.backstretch("foo.jpg");
 </script>

スライドショー無しなら、本体とプラグインと画像指定でOKです。

	    // 画像の配列を作成
        var images = [
            "pot-holder.jpg",
            "coffee.jpg"
        ];

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

        var index = 0;

        // 背景をコール。下記の場合、500ミリ秒で呼び出します。
        $.backstretch(images[index], {speed: 500});

        setInterval(function() {
            index = (index >= images.length - 1) ? 0 : index + 1;
            $.backstretch(images[index]);
        }, 5000);

スライドショーありだといろいろ設定が必要みたいですね。

手軽でよいのでは。MITとGPLのデュアルライセンス。以下よりデモの確認とライブラリのダウンロードができます。

BACKSTRETCH on github / DEMO

URL :
TRB :

Ads

Posts

Contact

Services