どのようなディスプレイサイズでも自動で
レイアウトを調整してくれるレスポンシブな
イメージスライダーを実装出来る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の調整が必要そうです。便利は便利なので上手く使いたいですね。マークアップもシンプルですし、なかなか良いのではないでしょうか。以下でダウンロードとデモの確認が可能です。