Thumbelina

JavaScript

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

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

水平・垂直の両方に対応

デモ

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

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

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

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

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

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

Thumbelina

関連記事

  1. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  2. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  3. jquery.resizeend

    JavaScript

    ウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」

    jquery.resizeendは、ブラウザのウィンドウをリサイズした…

  4. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  5. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

  6. no-image

    JavaScript

    シンプルで美しい軽量のjQueryモーダルウィンドウ「umodal」

    umodalはスッキリしたシンプルで美しいモーダルウィンドウを実装でき…

最近の記事

  1. Anker PowerHouse 200

アーカイブ

PAGE TOP