前回に続き、jQueryの便利なプラグインを紹介する。今回は画像スライダーのSliderKit、ドラッグ&ドロップでファイルをアップロードできるPlupload、評価のレートパネルを表示するStar Ratingだ。

画像スライダー
SliderKit

[URL]http://www.kyrielles.net/sliderkit/
[必要なファイル]jquery.sliderkit.1.6.min.js、jquery.easing.1.3.min.js、jquery.mousewheel.min.js、 sliderkit-core.css、sliderkit-demos.css

SliderKitで作成したフォトギャラリー
SliderKitで作成したフォトギャラリー
リスト1●SliderKitでフォトギャラリーを実装(sliderKit.html)
リスト1●SliderKitでフォトギャラリーを実装(sliderKit.html)
[画像のクリックで拡大表示]
SliderKitで生成できるその他の画像スライダー(公式サイトのデモより)
SliderKitで生成できるその他の画像スライダー(公式サイトのデモより)
[画像のクリックで拡大表示]

 SliderKitは、さまざまな画像スライダーを実装するためのプラグインです。簡単な前後スライダーはもちろん、フォトギャラリー、スライドショー、カルーセル、タブメニューなど、さまざまな用途に対応しています。スライダー操作をマウスホイールやキーボードでできてしまうので、使い勝手も優れています。リッチなだけあってマークアップやスタイル規則はやや複雑ですが、それも標準で提供されているサンプルをもとに修正していけば、かなりのことを簡単に実現できてしまいます。ただし、Chrome環境ではキーボードによる操作はできないようです。

 リスト1は、SliderKitで実装したフォトギャラリーです。改変する場合も、タグの構造や部品単位でclass属性は決まっていますので、不用意に変更しないように気を付けてください。

 正確には、自分で一からスタイルシートを用意する場合、photosgallery-captionsなどのクラス名は変更できます。ただし、今回はSliderKitが提供するサンプルCSSをそのまま利用しているため、これらも変更してはいけません。マークアップができてしまえば、あとはsliderkitメソッドでSliderKitの機能を適用するだけです。

 SliderKitではWebKit系ブラウザとの互換性をとる都合上、コード全体をいつもの$(function () {...});ではなく、$(window).load(function () {...});で括っている点にも要注意です。さもないと、Chromeなど一部のブラウザで正しくプラグインが動作しません。