• かちびと.net

    スマフォにも対応・ディスプレイサイズに自動で幅調整するレスポンシブなjQueryイメージスライダー・Blueberryのご紹介。iPhoneなどにもjQueryスライダーを自動で最適化します。

    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イメージスライダー・Blueberry

スポンサーリンク

どのようなディスプレイサイズでも自動で
レイアウトを調整してくれるレスポンシブな
イメージスライダーを実装出来るjQueryプ
ラグイン・Blueberryのご紹介です。イメージ
スライダーを取り入れているサイトは多い
のでこういうのは助かりますね。

iPhone等のスマートフォンにも自動でサイズを調整してくれます。痒いところに手が届く系ですね。地味にありがたい。

Blueberry


見た目はシンプルなイメージギャッラリーです。が、閲覧するディスプレイのサイズに依存する事無く、自動で幅を調整、最適化してくれます。MediaQueryと相性良さそうですね。

表示確認


Media Queries Testerでのキャプチャです。


Mobilizerでのキャプチャです。

コード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.blueberry.js"></script>
<script>
$(window).load(function() {
	$('.blueberry').blueberry();
});
</script>

本体とプラグインを読みこんでセレクタを指定するだけ。フェードする時間の調整等のオプション設定も可能です。

マークアップ

    <div class="blueberry">
      <ul class="slides">
        <li><img src="img/slide1.jpg" /></li>
        <li><img src="img/slide2.jpg" /></li>
        <li><img src="img/slide3.jpg" /></li>
        <li><img src="img/slide4.jpg" /></li>
      </ul>

      <ul class="pager">
        <li><a href="#"><span></span></a></li>
        <li><a href="#"><span></span></a></li>
        <li><a href="#"><span></span></a></li>
        <li><a href="#"><span></span></a></li>
      </ul>
    </div>

ライセンスはGPLらしいです。少しだけ表示が遅めかな?あと、IE7でページャの表示に不具合あるっぽいのでcssの調整が必要そうです。便利は便利なので上手く使いたいですね。マークアップもシンプルですし、なかなか良いのではないでしょうか。以下でダウンロードとデモの確認が可能です。

Blueberry

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services