CompareWYWの概要
CompareWYWは2つの画像を並べて真ん中のバーを左右に動かす事で画像の違いを分かり易くする事が出来ます。特に画像の編集や効果の違いをビフォー、アフターで比較する時等に使うと効果的です。
上記は参考画像のため操作出来ません。パソコンから見ると操作出来ます。
CompareWYWはGPLというライセンスを採用していて、自由にダウンロードして無料で利用出来ます。
初心者向けにホームページ作成、公開、SEO対策からアフィリエイトの導入方法まで解説しています。
CompareWYWの使い方
jQueryのプラグインであるCompareWYWを利用すると2つの画像を比較し易く出来ます。本ページではCompareWYWのダウンロード方法や使い方について説明しています。
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」からダウンロード出来ます。
上記の1.9.2にはjquery-1.8.3とjquery-ui-1.9.2.customが含まれています。
- ホームページ作成「jQueryの利用」
- 「jQueryプラグインの使い方」
- jQueryプラグイン「Colorboxの使い方」
- jQueryプラグイン「Nivo Sliderの使い方」
- jQueryプラグイン「DataTablesの使い方」
- jQueryプラグイン「SuperScrollorama」
- jQueryプラグイン「ScrollMagicの使い方」
