2016／06／17
- JQuery
「twentytwenty.js」画像をビフォーアフター（Before After）で切り替え比較できるJQuery プラグイン
他にもビフォーアフターを実装できるプラグインもありますが「twentytwenty.js」は横だけではなく縦にも対応しているのでより広い範囲で対応できます。
使用方法
ダウンロード
準備するファイル
・jquery.js
・jquery.twentytwenty.js
・jquery.event.move.js
・twentytwenty.css
外部ファイルの読み込み
head内へ以下を追加します。
|
1 2 3 4 5 6 |
<!-- css --> <link href="twentytwenty.css" rel="stylesheet" type="text/css" /> <!-- js --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.event.move.js"></script> <script src="js/jquery.twentytwenty.js"></script> |
JavaScript
デフォルト設定
対象となる要素を指定します。
|
1 2 3 |
$(window).load(function() { $(".twentytwenty-container").twentytwenty(); }); |
vertical設定
|
1 2 3 4 5 6 7 8 9 |
$(window).load(function() { $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({ default_offset_pct: 0.5 }); $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({ default_offset_pct: 0.5, orientation: 'vertical' }); }); |
HTML
デフォルト設定
比較させたい画像を任意の要素で囲みます。
|
1 2 3 4 |
<div class="twentytwenty-container"> <img src="img1.jpg" width="750px" height="500px"> <img src="img2.jpg" width="750px" height="500px"> </div> |
vertical設定
「 data-orientation=”vertical”」を追加。
|
1 2 3 4 |
<div class="twentytwenty-container" data-orientation="vertical"> <img src="img1.jpg" width="750px" height="500px"> <img src="img2.jpg" width="750px" height="500px"> </div> |
その他
「default_offset_pct: ここの数値」でラインの位置を設定できます。
twentytwenty.cssをいじればマウスオーバーの際のテキスト表示やラインの色を簡単に変更できます。
ビフォーアフター以外でもその他の画像の比較などに使用できると思います。
関連記事
コメントを残す