jQuery CompareWYW プラグインで画像のbefore / after を分かりやすく表示する

2枚の写真を重ねて見せて、before / afterや、オリジナル / 加工後などを分かりやすく表示しているサイトがたまにありますね。 jQuery CompareWYW pluginは、あれを簡単に行えるプラグインです。

ファイルはjQuery CompareWYW pluginの「Downloads」からダウンロードできます。

利用方法

落としたファイルと、jqueryファイル、jqueryuiファイルを読み込みます。画像の切り替えをhoverにする場合はjqueryuiファイルは必要ありません。

<link type="text/css" rel="stylesheet" href="file/jquery.comparewyw.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="file/jquery.comparewyw.min.js"></script>
<script type="text/javascript">
      $(document).ready(function(){
        $('.images').compareWYW({
            event: 'drag' //マウスをクリックで表示切り替えする場合（jquery-uiファイル必須）
        });
        $('.images_hover').compareWYW({
            event: 'hover' //マウスオンで表示切り替えする場合
        });
      });
</script>

HTML

<div class="images">
<img src="file/mouhitsu_x.png" width="268" height="268" alt="Before" />
<img src="file/mouhitsu_x2.png" width="268" height="268" alt="After" />
</div>
<div class="images_hover">
<img src="file/mouhitsu_x.png" width="268" height="268" alt="Before" />
<img src="file/mouhitsu_x2.png" width="268" height="268" alt="After" />
</div>

追記：こちらはレスポンシブデザインに対応していなかったのですが、TwentyTwentyプラグインだとレスポンシブデザインにも対応しているので、Bootstrapを利用しているサイトではこちらがおすすめです。