画像とテキストの組合せで見せ方を変えるJavaScript「Switch Display Optionswith CSS & jQuery」

画像とテキストは時と場合により色々な見せ方が必要となります。
表示スペースの都合で、サムネイルしか見せられない時もSwitch Display Optionswith CSS & jQuery - by Soh Tanakaを利用すると、スマートに表示することができます。

使用方法

jQueryからjquery.jsをダウロードします。
また、以下のように画像とテキストを記述していたとします。

<ul class="display">
	<li>
		<div class="content_block">
			<a href="#"><img src="画像パス" alt="" /></a>
			<h2><a href="#">テキスト</a></h2>
			<p>説明テキストテキスト</p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="画像パス" alt="" /></a>
			<h2><a href="#">テキスト</a></h2>
			<p>説明テキストテキスト</p>
		</div>
	</li>
	<!-- 以下、個数分 -->
</ul>
これに対し、以下のようなJavaScriptを記述します。 

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("a.switch_thumb").toggle(function(){ //.switch_thumbをクリックしたとき
	  $("ul.display").fadeOut("fast", function() { // 全体をフェードアウトさせる
	  	$(this).fadeIn("fast").addClass("thumb_view"); //クラスthumb_viewを付与してフェードイン
		 });
	  },
	function () { //.switch_thumbが再度クリックされたとき
	  $("ul.display").fadeOut("fast", function() { // 全体をフェードアウトさせる
	  	$(this).fadeIn("fast").removeClass("thumb_view");  //クラスthumb_viewを削除してフェードイン
		});
	});
});
</script>
スイッチボタンを作成します。
<a href="#" class="switch_thumb">スイッチテキスト</a> 最後にCSSで調整します。

ul.display {width: 756px;margin: 0;padding: 0;list-style: none;border-top: 1px solid #CCC;border-right: 1px solid #CCC;}
ul.display li {float: left;width: 754px;padding: 10px 0;margin: 0;border-top: 1px solid #111;border-right: 1px solid #111;border-bottom: 1px solid #CCC;border-left: 1px solid #CCC;}
ul.display li a {color: #CC0001;text-decoration: none;}
ul.display li .content_block {padding: 0 10px;}
ul.display li .content_block h2 {margin: 0;padding: 5px;font-weight: normal;}
ul.display li .content_block p {margin: 0;padding: 5px 5px 5px 245px;font-size: 1.2em;}
ul.display li .content_block a img{	padding: 5px;border: 2px solid #ccc;background: #fff;margin: 0 15px 0 0;float: left;}

/* ここからサムネだけ用 */
ul.thumb_view li{width: 250px;}
ul.thumb_view li h2 {font-size:14px;display: inline;}
ul.thumb_view li p{	display: none;}
ul.thumb_view li .content_block a img {margin: 0 0 10px;}

サンプル

スイッチ
Javascriptサンプルページ一覧
skuare.net