Before/After


Description: ビフォーアフターを実装するプラグインです。クロスブラウザで動いてくれますよ。実装にはjqueryUIが必要です。
Sample: demo
Tutorial: jQuery Before/After Plugin
License: -

Sample

before
after

Note

$(function(){
	$('#test1').beforeAfter({imagePath:'/jquery/'});
	$('#test').beforeAfter({
		animateIntro: true,
		showFullLinks:false,
		imagePath:'/jquery/'
	});
});

jQuery、jQueryUIとプラグインを読み込んで上記設定で動作します。

<div id="test">
	<div><img alt="before" src="http://jquery.kachibito.net/wp-content/uploads/2011/02/1111.jpg" width="400" height="225" /></div>
	<div><img alt="after" src="http://jquery.kachibito.net/wp-content/uploads/2011/02/2222.jpg" width="400" height="225" /></div>
</div> 

シンプルなマークアップで動作します。

Related snippet :

  • Description: カメラのシャッターのようなエフェクトで画像を切り替えるプラグイン。HTML5のcanvasを使っています。凄いですねこれwもちろん、対応ブラウザは限 ...
  • Description: かっこいいエフェクトでメニューを呼び出すプラグイン。ゲームみたいですね・・・クロスブラウザでは動作しませんが、なかなか印象的な見せ方ではないかなと思 ...
  • Description: シンプルなLightbox系プラグインです。汎用的なデザインで使いやすく、カスタマイズもしやすそうです。 Sample: demo ...
  • Description: クロスブラウザに対応したシンプルで使い勝手の良いギャラリー系プラグインです。マークアップもシンプルで導入も手軽に行えます。 Sample: ...
  • Description: 横長で可愛いコンテンツスライダーです。オート機能も追加されたようです。縦横のサイズを決めれば画像に限らず、様々なコンテンツを入れることが可能で、1ペ ...
  • Description: Googleマップを簡単に表示するプラグインです。1行のマークアップのみでマップを表示させることが可能です。GoogleMapAPIを使用します ...
  • Description: 背景に指定した画像をギャラリーにするプラグインです。IE6でも問題無し。背景指定なので、スライドショーの上に画像やテキストを自由に配置することも可能 ...