CompareWYWの使い方

jQueryのプラグインであるCompareWYWを利用すると2つの画像を比較し易く出来ます。本ページではCompareWYWのダウンロード方法や使い方について説明しています。

CompareWYWの概要

 CompareWYWは2つの画像を並べて真ん中のバーを左右に動かす事で画像の違いを分かり易くする事が出来ます。特に画像の編集や効果の違いをビフォー、アフターで比較する時等に使うと効果的です。

Before After
CompareWYWイメージ図

 上記は参考画像のため操作出来ません。パソコンから見ると操作出来ます。

 CompareWYWはGPLというライセンスを採用していて、自由にダウンロードして無料で利用出来ます。

CompareWYWのダウンロードと導入

  CompareWYWのダウンロードは「jQuery CompareWYW plugin」でDownloadをクリックして行います。ダウンロード後は圧縮されているため解凍が必要です。

 解凍したファイルの中には以下が含まれています。

・jquery.comparewyw.css
 スタイルシートです。サーバーのスタイルシートを配置するディレクトリにアップロードします。
・jquery.comparewyw.min.js
 CompareWYWのJavaScriptです。サーバーのJavaScriptを配置するディレクトリにアップロードします。

 アップロード後、「jQueryの利用」でjQueryを利用出来るようになっている場合は<head>と</head>の間に以下を追加してアップロードしたファイルを読み込ませます。

【CompareWYWを追加するためのhead内スクリプト例】
<script type="text/javascript" src="js/jquery.comparewyw.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.comparewyw.css" />

<script type="text/javascript">
      $(document).ready(function(){
        $('.images').compareWYW({
          event:'drag'
        });
      });
</script>

 又、<body>と</body>の間で実際に画像を配置する部分に以下を記述すると記述した部分に画像が表示されます。

【jQuery CompareWYWを追加するためのbody内html例】
<div class="images">
          <img src="image/a1.png" width="480" height="360" alt="Before" />
          <img src="image/b1.png" width="480" height="360" alt="After" />
</div>

 赤字部分は画像のファイル名、緑字部分は画像の幅と高さ、青字部分は画像の説明です。それぞれ利用する画像に合わせて修正して下さい。

留意点

 記述時点でCompareWYWはjQueryの最新版では動作せず、jquery-1.8.3、及びjquery-ui-1.9.2.customで動作しました。

 古いバージョンは「Download Builder」、又は「All jQuery UI Downloads」からダウンロード出来ます。

CompareWYW1

 上記の1.9.2にはjquery-1.8.3とjquery-ui-1.9.2.customが含まれています。

サイト関連1

ホームページ作成「jQueryの利用
jQueryプラグインの使い方
jQueryプラグイン「Colorboxの使い方
jQueryプラグイン「Nivo Sliderの使い方
jQueryプラグイン「DataTablesの使い方
jQueryプラグイン「SuperScrollorama
jQueryプラグイン「ScrollMagicの使い方
  • このエントリーをはてなブックマークに追加