TwentyTwentyプラグインで画像の before / after を分かりやすく表示する

jQuery CompareWYW プラグインで画像のbefore / after を分かりやすく表示するとは別のプラグインを利用する場合です。

TwentyTwentyプラグインの場合は下記のことができます。

  • ・画像を2枚重ねて比較する。
  • ・スライダーを掴んで動かせる。
  • ・左右のほか上下にも分けられる。
  • ・画像を利用していない。
  • ・オーバーレイで「Before / After」「前 / 後」「リジナル / 加工後」などのテキストを表示できる。
  • ・レスポンシブデザインにも対応している。

ダウンロードはこちらから。

利用方法

落としたファイルと、jqueryファイル、jqueryuiファイルを読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="file/jquery.event.move.js"></script>
<script type="text/javascript" src="file/jquery.twentytwenty.js"></script>
<script type="text/javascript">
$(window).load(function() {
  $(".images").twentytwenty(); //ノーマル
    $(".images_option")
        .twentytwenty({ //オプション例
            default_offset_pct: 0.7 // 0~1の間で、スライダーを表示する位置を指定します。0が左端、1が右端になります。
        });
});
</script>

HTML

<div style="width:268px;">
<img src="file/mouhitsu_x.png" width="268" height="268" alt="Before" />
<img src="file/mouhitsu_x2.png" width="268" height="268" alt="After" />
</div>
<div style="width:268px;">
<img src="file/mouhitsu_x.png" width="268" height="268" alt="Before" />
<img src="file/mouhitsu_x2.png" width="268" height="268" alt="After" />
</div>

オーバーレイで表示するテキストはcssで指定されていますので、変更する場合はtwentytwenty.cssの104行目、109行目あたりの下記を確認してください。日本語にする場合は文字コードをUTF8に変更しなければ文字化けが起きてしまうので注意が必要です。

.twentytwenty-before-label {
  opacity: 0; }
  .twentytwenty-before-label:before {
    content: "Before"; } /* ここを変更 */

.twentytwenty-after-label {
  opacity: 0; }
  .twentytwenty-after-label:before {
    content: "After"; } /* ここを変更 */