前回に続き、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)
[画像のクリックで拡大表示]
SliderKitで生成できるその他の画像スライダー(公式サイトのデモより)
[画像のクリックで拡大表示]

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

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

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

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

この先は会員の登録が必要です。有料会員(月額プラン)は登録月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら