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

harada 637views 更新:2014年4月17日

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を利用しているサイトではこちらがおすすめです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません