skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

画像とテキストの組合せで見せ方を変える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「Switch Display Optionswith CSS & jQuery」サンプル

記事作成：2009年10月23日

前の記事：クールな動きで時間を表示するJavaScript「Learn how to Create a Retro Animated Flip-Down Clock」
次の記事：スライドショー風に背景画像を見せるJavaScript「jQuery maxImage plugin」