画像にビフォーアフターを実装できるjQueryプラグイン

使う機会がありそうなので調べたら、いくつか良さそうなものがあったので備忘録兼ねて紹介します。
商品の使用前後・家などのリフォーム前後・美容室のカット前後といったように、ビフォーアフターを見せたいときに便利なjQueryプラグインです。
全部で3つのプラグインを紹介していますが、どのプラグインも簡単に設置できてほとんどのブラウザで問題なく動作する感じです。

TwentyTwenty

使用方法

「TwentyTwenty」からファイルをダウンロードし、jQueryと併せて必要なファイルを下記のように記述します。
パスなどは自身の環境に合わせて変更してください。

<link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.event.move.js"></script>
<script type="text/javascript" src="js/jquery.twentytwenty.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    $('.container').twentytwenty({
      default_offset_pct: 0.5    });
  });
</script>

オプションとして、上記コードでハイライトされているdefault_offset_pctでビフォーアフターの境目の初期位置を指定することができ、0.5と指定してる場合は初期位置は真ん中となります。
実際に表示させたい部分に下記のように記述します。

<div class="container">
  <img src="images/before.png" alt="Before" />
  <img src="images/after.png" alt="After" />
</div>

jQueryで記述をしたclassを用いたdivの中（今回のサンプルでは.container）に、ビフォー・アフターの順番で画像を記述します。
サポートブラウザもひと通り大丈夫で、iPhoneやAndroidのスマートフォン、iPadなどのタブレットでも問題なく動きます。
IEは一応IE8+となっていてとりあえず動きはするんですが、IETesterで確認するといまいちな感じでした...。

プラグインの詳細やダウンロード、実際の動きの確認は以下より。

ClassyCompare

使用方法

「ClassyCompare」からファイルをダウンロードし、jQueryと併せて必要なファイルを下記のように記述します。
パスなどは自身の環境に合わせて変更してください。

<link href="css/jquery.classycompare.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js/jquery.classycompare.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    $('.compare').ClassyCompare({
      defaultgap: 50, // ビフォーアフターの境目の初期位置
      leftgap: 10,    // 境目の左側での限界値
      rightgap: 10,   // 境目の右側での限界値
      caption: true,  // キャプションの有無
      reveal: 0.5     // 明るさ？（配布サイトにも記載なし）
    });
  });
</script>

オプションは全部で5つ用意されており、ビフォーアフターの境目の初期位置やキャプションの有無などを指定できます。
上記コメントだとleftgapとrightgapが少し分かり辛いですが、簡単に言うと画像の左右に指定した数値の隙間が空きます。
実際に表示させたい部分に下記のように記述します。

<div class="compare">
  <img src="images/before.png" alt="Before" />
  <img src="images/after.png" alt="After" />
</div>

jQueryで記述をしたclassを用いたdivの中（今回のサンプルでは.compare）に、ビフォー・アフターの順番で画像を記述します。
また、altに記述した文言はオプションでcaption: trueにしておけば画像上に表示され、ビフォーの領域が広いときはビフォーのaltの内容、アフターの領域が広いときはアフターのaltの内容に切り替わるようになっています。
サポートブラウザもひと通り大丈夫な感じで、IETester確認ではありますがIE7でも特に問題なさそうな感じでした。
スマートフォンやタブレットでも一応問題なく動きはしますが切り替えをタップで行う感じなので、スマートフォンやタブレットを考慮するなら先程の「TwentyTwenty」のが良いかもしれません。

プラグインの詳細やダウンロード、実際の動きの確認は以下より。

ClassyCompare

jQuery CompareWYW plugin

使用方法

「jQuery CompareWYW plugin」からファイルをダウンロードし、jQueryと併せて必要なファイルを下記のように記述します。
パスなどは自身の環境に合わせて変更してください。

<link href="css/jquery.comparewyw.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.comparewyw.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.images').compareWYW({
      animateDuration: 500, // 境目が動く際のスピード
      axis: x,              // 方向を選択（x or y）
      event: 'drag'         // 境目の動かし方（drag or hove）
    });
  });
</script>

このプラグインはjQueryだけでなくjQuery UIも必要になります。
オプションは3つ用意されており、境目の動くスピード、縦横どちらのタイプかの選択、ドラッグかホバーどちらで境目を動かすかを選択できます。
実際に表示させたい部分に下記のように記述します。

<div class="images">
  <img src="images/before.png" alt="Before" />
  <img src="images/after.png" alt="After" />
</div>

他のプラグインと同様、jQueryで記述をしたclassを用いたdivの中（今回のサンプルでは.images）に、ビフォー・アフターの順番で画像を記述します。
サポートブラウザもひと通り大丈夫な感じで、IETester確認ではありますがIE7でも問題なく動きました。

プラグインの詳細確認やダウンロードは以下よりでき、実際の動きはファイル内に同梱されているドラッグとホバーそれぞれのサンプルで確認できます。

jQuery CompareWYW plugin