ビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン【TwentyTwenty】｜DAD UNION

2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン（TwentyTwenty）をご紹介します。
「基本的な使用法」「垂直方向」「並んで」、3パターンの利用方法を紹介します。

Contents

2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン（TwentyTwenty）のCSSファイル読込
2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン（TwentyTwenty）のHTML記述
2枚のビフォー・アフター画像をわかりやすく比較するJavaScript（TwentyTwenty）記述
【JavaScript】ビフォー・アフター画像をわかりやすく比較するプラグインデモ|TwentyTwentyページ
- ソース元：TwentyTwenty

2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン（TwentyTwenty）のCSSファイル読込

※foundation.css、twentytwenty-no-compass.cssファイルを読み込みます。

  <link href="css/foundation.css" rel="stylesheet" type="text/css" />
  <link href="css/twentytwenty-no-compass.css" rel="stylesheet" type="text/css" />

2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン（TwentyTwenty）のHTML記述

※「基本的な使用法」「垂直方向」「並んで」の3パターンのビフォー・アフター画像を用意しました。

    <div class="row" style="margin-top: 2em;">
      <div class="large-4 columns">
        <h3>基本的な使用法</h3>
        <p>プラグインの基本的な使用法を示します。</p>
      </div>
      <div class="large-8 columns">
        <div class="twentytwenty-container">
          <img src="img/1_1.jpg" />
          <img src="img/1_2.jpg" />
        </div>
      </div>
    </div>
    
    <div class="row" style="margin-top: 2em; margin-bottom: 2em;">
      <div class="large-4 columns">
        <h3>垂直方向</h3>
        <p>上下にスライドする様子を示します。</p>
      </div>
      <div class="large-8 columns">
        <div class="twentytwenty-container" data-orientation="vertical">
          <img src="img/1_1.jpg" />
          <img src="img/1_2.jpg" />
        </div>
      </div>
    </div>

    <div class="row" style="margin-bottom: 2em;">
      <div class="large-4 columns">
        <h3>並んで</h3>
        <p>一度に多重比較を使用します。</p>
      </div>
      <div class="large-4 columns">
        <div class="twentytwenty-container">
          <img src="img/1_1.jpg" />
          <img src="img/1_2.jpg" />
        </div>
      </div>
      <div class="large-4 columns">
        <div class="twentytwenty-container">
          <img src="img/1_1.jpg" />
          <img src="img/1_2.jpg" />
        </div>
      </div>
    </div>

2枚のビフォー・アフター画像をわかりやすく比較するJavaScript（TwentyTwenty）記述

※jquery.min.js、jquery.event.move.js、jquery.twentytwenty.jsを読み込みます。$(“ビフォー・アフター画像表示対象エリア”).twentytwenty({オプション})を記述します。オプションではビフォー・アフター画像のデフォルトの表示比率等を設定します。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="js/jquery.event.move.js"></script>
    <script src="js/jquery.twentytwenty.js"></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>