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. Liquid Slider

    JavaScript

    タブパネル式のレスポンシブなjQueryスライダー「Liquid Slider」

    ちょっと珍しそうなスライダーを見つけたのでご紹介します。タブパネルにも…

  2. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  4. HR Navigation Responsive Menu
  5. jBox

    JavaScript

    ツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」

    jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知…

  6. Before and after slider

最近の記事

  1. Anker PowerExpand 8-in-1 USB-C PD 10Gbps データ ハブ
  2. SAP-001
  3. OWL-QI10W2Q18W
  4. アースクーラー3WAY

アーカイブ

PAGE TOP