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