jQuery Before/After Plugin

ビフォー・アフターを画像でわかりやすくみせることが出来るのがこの「jQuery Before/After Plugin」です。たとえば、化粧品の使用前使用後の写真、ダイエット前ダイエット後の写真、家のリフォーム前リフォーム後の写真など同じアングルの写真を比べて見て欲しいときに便利です。

サンプルを作ってみました。

→ ビフォーアフターを簡単に紹介できるjQueryプラグイン「 jQuery Before/After Plugin」サンプル

ただ写真を並べて紹介するよりも、印象が強くなりますね。ネットショップでも活用できそうです。


【使用方法】
まずはjQuery Before/After Pluginの配布サイトからダウンロードします。

BODY部の最後にJavaScriptの記述をします。ファイルのパスとダウンロードしてきたファイル名に注意して下さい。

そして、画像を表示させたい箇所に以下を記述します。

以上でビフォーアフターの設置完了です。

最後にサンプルのソースを書いておきますので、ご参考まで。

この記事と関連してると思われる記事: