前に見かけて気になっていた『Before/After Plugin』
気になっていたけど、使う機会がなかったので、
ブログで使ってみることにしました。
せっかくなので、実装方法も紹介したいと思います。

jQuery 『Before/After Plugin』のデモ

▼まずは必要なファイルをダウンロード
まずは、『jQuery Before/After Plugin』をダウンロードします。
jQueryプラグインなので、『jQuery』をダウンロードします。
ビフォー・アフターを操作するバーをドラッグするために、『jQuery UI』もダウンロード。
（僕が『jQuery Before/After Plugin』をダウンロードした時は、『jQuery』と『jQuery UI』も一緒に圧縮されていました。）
ダウンロードするファイルは、以上で終了です。

▼『Before/After Plugin』を使用する準備
ダウンロードしたファイルを、読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>

▼HTMLを書く
HTMLは以下のような感じで書きます。

<div id="ID名">
    <div>
        <img alt="after" src="ba_02.jpg" width="550" height="367" />
    </div>

    <div>
        <img alt="before" src="ba_01.jpg" width="550" height="367" />
    </div>
</div>

注意するのは、使用する画像は同じサイズであること。
画像を「div」要素で囲み、その「div」要素をさらに「div」要素で囲むことです。
画像を囲んでいる「div」には、任意の「id」をつけてください。
この「id」が、『Before/After Plugin』が適用される画像となります。

▼JavaScriptを書く
JavaScriptを書きます。

$("id名").beforeAfter();

基本的には、たったこれだけで『Before/After』が使用できるようになります。
デモ01

▼オプション
オプションを指定することもできます。

animateIntro  －  ビフォー・アフターを操作するバーが最初から中央にあるか、右側から徐々に中央に移動するかをBOOL値で指定できます。デフォルトはfalseとなっていて、右側スタートしたい場合はtrueを指定します。
デモ02

introDuration  －  animateIntroにtrueを指定している場合のみ適用されるオプションで、バーが移動を開始する時間を指定することができます。ミリ秒で指定することができ、デフォルトは1000となっています。
デモ03

introDelay  －  このオプションもanimateIntroにtrueを指定している場合のみ適用されるオプションで、バーが移動するスピードを指定することができます。ミリ秒で指定することができ、デフォルトは1000となっています。
デモ04

showFullLinks  －  ビフォー・アフターの画像の下に、『Show only before』と『Show only after』を表示するかをBOOL値で指定できます。デフォルトはtrueとなっています。
デモ05

imagePath  －  ナビゲーションで使用する画像(バーの画像など)のパスを指定することができます。デフォルトは“/js/beforeAfter/’となっています。

画像を用意するのが大変な気もしますが、
なにか面白いことができそうなプラグインですね。