2枚の画像をBeforeAfterで比較するjQueryプラグイン

275

使用前・使用後がはっきりとわかる!
画像中央のスライダを移動させることで使用前使用後というか2枚の写真のBeforeAfterが表現できます。まぁ~読むよりも見てもらったほうが早いのでどうぞ!こんなのです!ってか使えると思います!

2枚の画像をBeforeAfterで比較するjQueryプラグイン

画像中央のスライダを左右に移動させることで2枚の画像を比較します。

before
after

HTMLサンプル

<div id="container1">
	<div><img alt="before" src="images/275/teeth-before.jpg" width="600" height="400" /></div>
	<div><img alt="after" src="images/275/teeth-after.jpg" width="600" height="400" /></div>
</div>

head部記述サンプル

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.3.min.js"></script>

<script type="text/javascript">
$(function(){

	$('#container1').beforeAfter({imagePath:''});

});
</script>
 <style> html{display : none ; } </style>
 <script>
    if( self == top ) {
        document.documentElement.style.display = 'block' ;
    } else {
        top.location = self.location ;
    }
 </script>

一言

いろいろなシーンで使えるプラグインですね。たとえば画像のとおり歯のホワイトニングやリフォーム会社の施工前施工後などはこれでばっちりですね。

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/jquery/275/trackback/