Thumbelinaは、サムネイル画像に最適なコンテンツスライダーを実装することができるjQueryプラグインです。小型化されたファイル容量も1KBほどと、超軽量に仕上がっています。レスポンシブに対応しているほか、動作もとてもスムーズです。
水平・垂直の両方に対応
Thumbelinaの実際のデモ動作は、下記のページから確認できます。
デモページではいくつかのサンプルが用意されています。横に並べられたサムネイル画像や縦に並べられたサムネイル画像、またはCSSでスタイルリングをカスタマイズしたタイプといったものがあります。
スライダーの位置が水平・垂直の両方に対応しているのがうれしいですね。また、Cloud Zoomというプラグインと組み合わせることで、サムネイル画像の一覧から選択した画像を拡大表示させることもできます。かなり利便性も向上するので、サムネイル画像だけではなく、オリジナルの大きいサイズの画像も見せたいというシーンで活用できますね。
サムネイル画像を前後移動できる左右のコントロールボタンは、CSSからスタイルを変更することが可能です。自分好みに手軽にカスタマイズできるので、自サイトに合わせたスタイリングを楽しめます。
orientation、easing、maxSpeedなどといったオプションも用意されています。orientationには、horizontalかverticalを指定します。ここで水平か垂直のどちらかを決めることが可能です。ちなみに、デフォルト値はhorizontalになっています。
そのほかのデフォルト値は、easingが8、maxSpeedが5です。
HTMLのマークアップもスッキリ記述できるので、使い方もわかりやすく手軽に実装できると思います。レスポンシブにも対応しているので、スマホからも快適に閲覧または操作できるのがいいですね。
というわけで、水平・垂直に対応した軽量のサムネイル画像のギャラリーを実装できる「Thumbelina」のご紹介でした。Thumbelinaの詳細やダウンロードは、下記のページからどうぞ。
