Thumbelina

JavaScript

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

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

水平・垂直の両方に対応

デモ

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

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

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

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

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

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

Thumbelina

ValidatrHTML5のinput属性による検証ができるフォーム実装「Validatr」前のページ

テキストを選択してシェアできるMediumライクな「share-this」次のページshare-this

関連記事

  1. no-image

    JavaScript

    フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

    jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリ…

  2. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  3. h5Validate

    JavaScript

    HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」

    h5ValidateはHTML5によるフォームバリデーションを実装する…

  4. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  5. jQuery Panorama Viewer

    JavaScript

    パノラマビューを実装できるjQueryプラグイン「jQuery Panorama Viewer」

    jQuery Panorama Viewerはパノラマビューを実装する…

最近の記事

  1. ゴムの耳栓
  2. ライオンコーヒー(バニラマカダミア)
PAGE TOP