Thumbelina

JavaScript

サムネイル画像のギャラリーに最適なコンテンツスライダー「Thumbelina」

Thumbelinaは、サムネイル画像に最適なコンテンツスライダーを実装することができるjQueryプラグインです。小型化されたファイル容量も1KBほどと、超軽量に仕上がっています。レスポンシブに対応しているほか、動作もとてもスムーズです。

水平・垂直の両方に対応

デモ

デモページではいくつかのサンプルが用意されています。横に並べられたサムネイル画像や縦に並べられたサムネイル画像、またはCSSでスタイルリングをカスタマイズしたタイプといったものがあります。

スライダーの位置が水平・垂直の両方に対応しているのがうれしいですね。また、Cloud Zoomというプラグインと組み合わせることで、サムネイル画像の一覧から選択した画像を拡大表示させることもできます。かなり利便性も向上するので、サムネイル画像だけではなく、オリジナルの大きいサイズの画像も見せたいというシーンで活用できますね。

サムネイル画像を前後移動できる左右のコントロールボタンは、CSSからスタイルを変更することが可能です。自分好みに手軽にカスタマイズできるので、自サイトに合わせたスタイリングを楽しめます。

orientation、easing、maxSpeedなどといったオプションも用意されています。orientationには、horizontalかverticalを指定します。ここで水平か垂直のどちらかを決めることが可能です。ちなみに、デフォルト値はhorizontalになっています。

そのほかのデフォルト値は、easingが8、maxSpeedが5です。

HTMLのマークアップもスッキリ記述できるので、使い方もわかりやすく手軽に実装できると思います。レスポンシブにも対応しているので、スマホからも快適に閲覧または操作できるのがいいですね。

Thumbelina

関連記事

  1. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

  2. Scroll Indicator

    JavaScript

    シンプルなスクロールインジケーターを実装できる「Scroll Indicator」

    Scroll Indicatorは、スクロールによるアニメーションでコ…

  3. waslidemenu
  4. JavaScript

    シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使っ…

    とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「R…

  5. EZ Tabs jQuery Plugin
  6. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP