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"; } /* ここを変更 */
