Sponsor Flip Wall


Description: 画像をクリックするとフリップ(ひっくり返る)するコンテンツを実装するjQueryプラグインです。uiも必要となります。IE6ではフリップするとレイアウトが崩れます。
Sample: demo
Tutorial: Sponsor Flip Wall With jQuery & CSS
License: 個人でも商用でも利用出来るけど再配布や再販売は不可

Sample

Note

$(document).ready(function(){
	/* The following code is executed once the DOM is loaded */

	$('.sponsorFlip').bind("click",function(){

		// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

		var elem = $(this);

		// data('flipped') is a flag we set when we flip the element:

		if(elem.data('flipped'))
		{
			// If the element has already been flipped, use the revertFlip method
			// defined by the plug-in to revert to the default state automatically:

			elem.revertFlip();

			// Unsetting the flag:
			elem.data('flipped',false)
		}
		else
		{
			// Using the flip method defined by the plugin:

			elem.flip({
				direction:'lr',
				speed: 350,
				onBefore: function(){
					// Insert the contents of the .sponsorData div (hidden from view with display:none)
					// into the clicked .sponsorFlip div before the flipping animation starts:

					elem.html(elem.siblings('.sponsorData').html());
				}
			});

			// Setting the flag:
			elem.data('flipped',true);
		}
	});

});

jQueryとui、プラグインを読み込んで、上記の設定を行います。

<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="http://jquery.kachibito.net/wp-content/uploads/2011/01/14.jpg" alt="14" />
					</div> 

					<div class="sponsorData">
						<div class="sponsorDescription">
							14の説明が入ります.
						</div>
						<div class="sponsorURL">
							<a href="http://jquery.kachibito.net/">http://jquery.kachibito.net/</a>
						</div>
					</div>
				</div> 

マークアップは結構シンプル。

Related snippet :

  • Description: 要素がフリップ(ひっくり返す)するWebギャラリーです。縦や横に対応します。クロスブラウザ対応でとてもシンプルなので汎用的に使えそうですね。 ...
  • Description: ソート出来るポートフォリオを構築できます。IE6や7でも動作しますが、アニメーションが少々怪しい感じです。class名を振ってソートするシンプルな手 ...
  • Description: canvasを使って小さいグラフをかけるようにするjQueryプラグインです。とっても小さく、span要素で描けるので文中にも入れたり出来ます。 ...
  • Description: iTuneライクなスライダーを手軽なコードで実装します。IEだとちょっと微妙ですね・・・サムネイル付きで画像の切り替わりと連動してサムネイルも動きま ...
  • Description: 多くの形に対応できる高機能コンテンツスライダープラグインです。テキストなどや画像ギャラリー、上記画像のようなサムネイルギャラリーなども構築可能。表示 ...
  • Description: マウスオーバーでアイコンがスムーズに拡大し、キャプションもツールチップ的に表示させます。全てのブラウザで動作してくれます。 Sample: ...
  • Description: 左のサムネイルにマウスオーバーするとアニメーションエフェクト付きで拡大、クリックすると右の大きな画像が切り替わる、というイメージギャラリーです。 ...