no-image

JavaScript

2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

baSliderはビフォー・アフターのような2枚の画像の違いを比較できるjQueryプラグインです。ドラッグやタッチで左右もしくは上下にスライドさせることで、2種類の画像を手軽に比較できます。

水平・垂直どちらにも対応

デモ

デモでは分割された境界線の真ん中にある丸いアイコンをドラッグやタッチでスライドさせることで2枚の画像を簡単に比較できるようになっています。

水平(左右のスライド)だけではなく垂直(上下のスライド)にも対応しているのが便利ですね。

どちらも画像1枚分のスペースで2枚の画像を比較できるので、スペースに余裕がないレイアウトやモバイルには最適です。

また、スライドさせた後に境界線を中央に戻す(リバース)機能も用意されています。こちらはオプションからオン・オフの設定が可能です。

主なオプション項目は、align、start、anim、handler、reverse、speed、height、imgHeightです。先ほどのリバースは「reverse」から設定できます。デフォルト値は「true」です。

また、水平/垂直の指定は「align」から行えます。こちらのデフォルト値は「horizontal」になります。

使い方もとても簡単なので、サクッと実装できるはず。というわけで、2枚の画像を手軽に比較できるjQueryプラグイン「baSlider」の紹介でした。ライセンスはMITとのこと。

baSlider

関連記事

  1. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  2. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  3. Guardian

    JavaScript

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

    Guardianはフォームにバリデーション機能を実装することができるj…

  4. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

  5. Thumbelina

    JavaScript

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

    Thumbelinaは、サムネイル画像に最適なコンテンツスライダーを実…

  6. no-image

    JavaScript

    依存関係のないタグ付け機能を実装できる「taggle.js」

    taggle.jsは依存関係のないタグ付け機能を実装できるのが特徴です…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP