【jQuery】ビフォー・アフターの比較、TwentyTwentyの使い方を解説!

シュウ

今回は【jQuery】ビフォー・アフターの比較、TwentyTwentyの使い方を解説!
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
プラグインのTwentyTwentyを使ってビフォー・アフターの比較を作成したい方向け
今回はtwentytwenty.jsについて解説しております。

今回は、TwentyTwenty(ビフォー・アフターの比較画像)についての解説になります。
「TwentyTwenty」になりますが、今でも簡単で使いやすいプラグインになっております。

イメージ図は上記のようになります。
ビフォー・アフターの画像を用意し、スライドすることによってその比較ができるようになります。

[記事の内容]

TwentyTwentyについて

TwentyTwentyとは、ビフォー・アフターの比較画像のことを示します。
jQueryが苦手な方でも問題ありません。
まずは下記のサイトから「TwentyTwenty」をダウンロードしましょう。

●TwentyTwentyにアクセス: 1https://github.com/zurb/twentytwenty

●「Code」ボタンをクリック: 2

●「Download ZIP」ボタンをクリック: 3

必要なファイルについて

ダウンロード後に必要なファイルについて解説していきます。
まずは、ファイル名の「twentytwenty-master」をご確認ください。

●CSSファイル: 1「css」 > 「foundation.css」を使用します。

●CSSファイル: 2「css」 > 「twentytwenty.css」を使用します。

●CSSファイル: 3「js」 > 「jquery.event.move.js」を使用します。

●jsファイル: 4「js」 > 「jquery.twentytwenty.js」の4点を使用します。

<!--css-->
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/twentytwenty.css">
<!--js-->
<script src="js/jquery.event.move.js" type="text/javascript"></script>
<script src="js/jquery.twentytwenty.js" type="text/javascript"></script>

また、「twentytwenty.js」を使用する際には、twentytwentyを使用する宣言をしなければなりません。
以下のコードを合わせて指定しましょう。

<!--css-->
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/twentytwenty.css">
<!--js-->
<script src="js/jquery.event.move.js" type="text/javascript"></script>
<script src="js/jquery.twentytwenty.js" type="text/javascript"></script>
<script>
  $(window).load(function(){
    $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
    $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
 });
</script>

「twentytwenty.js」と繋げて記述するのが良いでしょう。
また、ファイルの階層は、ご自身のフォルダに合わせてください。

次に、jquery本体のプラグイン設置します。
今回は2つ目のパターンを採用して解説します。

● 1つ目は、ファイルをダウンロードして使用するパターン、
● 2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。
どちらでも問題ありません。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery.event.move.js" type="text/javascript"></script>
<script src="js/jquery.twentytwenty.js" type="text/javascript"></script>
<script>
  $(window).load(function(){
    $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
    $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
 });
</script>

必ず、jquery本体のプラグイン上、twentytwentyを下に設置しましょう。
jqueryをダウンロードしたい方は、こちらのリンクから。

記述場所について

基本的にはbody内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 【jQuery】ビフォー・アフターの比較....</title>
<!--css-->
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/twentytwenty.css">
</head>
<body>

　コンテンツが入ります。
 
<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery.event.move.js" type="text/javascript"></script>
<script src="js/jquery.twentytwenty.js" type="text/javascript"></script>
<script>
  $(window).load(function(){
    $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
    $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
 });
</script>
</body>
</html>

ビフォー・アフターの比較の設定について

次に、ビフォー・アフターの比較の設定について解説します。

横スライド

デモサイトはコチラから。
シンプルな横スライドになります。
基本構造の書き方は以下のようになります。

横スライド

<!--横スライド-->
<div class="row">
	<div class="columns">
		<div class="twentytwenty-container twentytwenty01">
			<img src="before.jpg" />
			<img src="after.jpg" />
		</div>
	</div>
</div>

/*--画像1枚の横幅サイズを指定--*/
.twentytwenty01 {width: ○○○px;}

デフォルトでスライド領域が100%の指定されているため、必ずCSSで幅の指定をおこないましょう。
今回は画像サイズが横幅240のため、width: 240pxが指定されております。

また、default_offset_pct: 0.7を、0.5に変更すると中央からのスライドになります。

縦スライド

デモサイトはコチラから。
縦スライドになります。
基本構造の書き方は以下のようになります。

縦スライド

<!--縦スライド-->
<div class="row">
	<div class="large-8 columns">
		<div class="twentytwenty-container twentytwenty02" data-orientation="vertical">
			<img src="before.jpg" />
			<img src="after.jpg" />
		</div>
	</div>
</div>

/*--画像1枚の横幅サイズを指定--*/
.twentytwenty02 {width: ○○○px;}

縦スライドを実装する場合は、data-orientation="vertical"を追加しましょう。
default_offset_pct: 0.3を、0.5に変更すると中央からのスライドになります。

複数スライド

デモサイトはコチラから。
複数スライドになります。
基本構造の書き方は以下のようになります。

複数スライド

<!--複数スライド-->
<div class="row">
	<div class="large-4 columns">
		<div class="twentytwenty-container">
			<img src="before.jpg" />
			<img src="after.jpg" />
		</div>
	</div>
	<div class="large-4 columns">
		<div class="twentytwenty-container">
			<img src="before.jpg" />
			<img src="after.jpg" />
		</div>
	</div>
</div>

オプションについて

上記では、「比較」の動きの部分を解説してきましたが、
オプションでは、スライドの位置の変更が可能になります。

default_offset_pct: 0.7

指定できる値

default_offset_pct
スライド位置になります、初期値は0.5になっております。

ここで解説したオプションは公式のサイトに記述していたものになります。
こちらのサイトでご確認ください。

まとめ

今回はこれで以上です。

POINT

TwentyTwentyとは、ビフォー・アフターの比較画像のことを示します。
必要なファイルはfoundation.cssとtwentytwenty.css、jquery.event.move.js、jquery.twentytwenty.jsの4点になります。
こちらにデモサイトを用意しました。