画像にビフォーアフターを実装できるjQueryプラグイン

  • Posted on
  • Category : Tips
画像にビフォーアフターを実装できるjQueryプラグイン

使う機会がありそうなので調べたら、幾つか良さそうなものがあったので備忘録兼ねて紹介します。商品の使用前後・家などのリフォーム前後・美容室のカット前後といったように、ビフォーアフターを見せたいときに便利なjQueryプラグインです。全部で3つのプラグインを紹介していますが、どのプラグインも簡単に設置できてほとんどのブラウザで問題なく動作する感じです。

画像にビフォーアフターを実装できるjQueryプラグイン 目次

  1. TwentyTwenty
  2. ClassyCompare
  3. jQuery CompareWYW plugin

1. TwentyTwenty

TwentyTwenty

使用方法

TwentyTwenty」からファイルをダウンロードし、jQueryと併せて必要なファイルを以下のように記述します。
パスなどは自身の環境に合わせて変更してください。

HTML

<link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.event.move.js"></script>
<script type="text/javascript" src="js/jquery.twentytwenty.js"></script>
<script type="text/javascript">
	$(window).load(function(){
		$('.container').twentytwenty({default_offset_pct: 0.5});
	});
</script>

オプションとして、上記ソースの赤字default_offset_pct: 0.5でビフォーアフターの境目の初期位置を指定することができ、0.5と指定してる場合は初期位置は真ん中となります。
実際に表示させたい部分に以下のように記述します。

HTML

<div class="container">
	<img src="images/before.png" alt="Before" />
	<img src="images/after.png" alt="After" />
</div>

jQueryで記述をしたクラスを用いたdivの中(今回のサンプルではclass="container")に、ビフォー・アフターの順番で画像を記述します。
サポートブラウザもひと通り大丈夫で、iPhoneやAndroidのスマートフォン、iPadなどのタブレットでも問題なく動きます。
IEは一応IE8+となっており、とりあえず動きはするんですがIETesterで確認するといまいちな感じでした…。

プラグインの詳細やダウンロード、実際の動きの確認は以下より。

目次へ

2. ClassyCompare

ClassyCompare

使用方法

ClassyCompare」からファイルをダウンロードし、jQueryと併せて必要なファイルを以下のように記述します。
パスなどは自身の環境に合わせて変更してください。

HTML

<link href="css/jquery.classycompare.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js/jquery.classycompare.js"></script>
<script type="text/javascript">
	$(window).load(function() {
		$('.compare').ClassyCompare({
			defaultgap: 50,  // ビフォーアフターの境目の初期位置
			leftgap: 10,     // 境目の左側での限界値
			rightgap: 10,    // 境目の右側での限界値
			caption: true,   // キャプションの有無
			reveal: 0.5      // 明るさ?(配布サイトにも記載なし)
		});
	});
</script>

オプションは全部で5つ用意されており、ビフォーアフターの境目の初期位置やキャプションの有無などを指定できます。
上記コメントだとleftgaprightgapが少し分かり辛いですが、簡単に言うと画像の左右に指定した数値の隙間が空きます。
実際に表示させたい部分に以下のように記述します。

HTML

<div class="compare">
	<img src="images/before.png" alt="Before" />
	<img src="images/after.png" alt="After" />
</div>

jQueryで記述をしたクラスを用いたdivの中(今回のサンプルではclass="compare")に、ビフォー・アフターの順番で画像を記述します。
また、altに記述した文言はオプションでcaption: trueにしておけば画像上に表示され、ビフォーの領域が広い時はビフォーのaltの内容、アフターの領域が広い時はアフターのaltの内容に切り替わるようになっています。
サポートブラウザもひと通り大丈夫な感じで、IE7でも特に問題なさそうな感じでした。
スマートフォンやタブレットでも一応問題なく動きはしますが切り替えをタップで行う感じなので、スマートフォンやタブレットを考慮するなら先程の「TwentyTwenty」のが良いかもしれません。

プラグインの詳細やダウンロード、実際の動きの確認は以下より。

目次へ

3. jQuery CompareWYW plugin

jQuery CompareWYW plugin

使用方法

jQuery CompareWYW plugin」からファイルをダウンロードし、jQueryと併せて必要なファイルを以下のように記述します。
パスなどは自身の環境に合わせて変更してください。

HTML

<link href="css/jquery.comparewyw.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.comparewyw.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.images').compareWYW({
			animateDuration: 500,  // 境目が動く際のスピード
			axis: x,               // 方向を選択(x or y)
			event: 'drag'          // 境目の動かし方(drag or hove)
		});
	});
</script>

このプラグインはjQueryだけでなくjQuery UIも必要になります。
オプションは3つ用意されており、境目の動くスピード・縦横どちらのタイプかの選択・ドラッグ、ホバーどちらで境目を動かすかを選択できます。
実際に表示させたい部分に以下のように記述します。

HTML

<div class="images">
	<img src="images/before.png" alt="Before" />
	<img src="images/after.png" alt="After" />
</div>

他のプラグインと同様、jQueryで記述をしたクラスを用いたdivの中(今回のサンプルではclass="images")に、ビフォー・アフターの順番で画像を記述します。
サポートブラウザもひと通り大丈夫な感じで、IE7でも問題なく動きました。

プラグインの詳細確認やダウンロードは以下よりできます。
実際の動きはファイルをダウンロードするとドラッグとホバーそれぞれのサンプルが同梱されているので、そちらで確認してください。

目次へ

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。