[mootools]サムネイルクリックで画像とコメントを変更する

前に書いたサムネイルにマウスオーバーしたら画像を切り替える を、
mootools1.2使ってフェードインとかつけたサンプル。

注意※ソースはmootools1.2用なので1.1では多分動きません。

<div id="change_image">
	 <div id="view">
	 <p id="myImg"><img src="img1.jpg" alt="Sample Image" width="400" height="320"/></p>
	 
	 <p class="comment" style="display:block">イメージ1コメント</p>
	 <p class="comment" style="display:none">イメージ2コメント</p>
	 <p class="comment" style="display:none">イメージ3コメント</p>
	 <p class="comment" style="display:none">イメージ4コメント</p>
	 </div>
	<ul id="thumbs">
		<li><img src="img1_thumb.jpg" alt="Sample Image01" width="100" height="80" /></li>
		<li><img src="img2_thumb.jpg" alt="Sample Image02" width="100" height="80" /></li>
		<li><img src="img3_thumb.jpg" alt="Sample Image03" width="100" height="80" /></li>
		<li><img src="img4_thumb.jpg" alt="Sample Image04" width="100" height="80" /></li>
	</ul>
	
	<p class="cl">右の画像をクリックすると大きな画像が表示されます。</p>
  </div>

コメントはサムネイルと同じ順番で全部ソースの中に書いて、styleでdisplay:noneにしておく。
サムネイルとコメントはソース上のを勝手に拾う。

jsソースは書き散らして長いので設定以外割愛。ファイル見てください。

	var viewarea =$('myImg'); // メイン画像のある要素のID
	var thumb = $("thumbs").getElements("img"); // サムネイル画像のあるID(前者)
	var comment =$$('p.comment'); // コメントの要素とクラス
	var mag = 4; //サムネイル縮小率
	var regrep = "_thumb"; //サムネ画像の名前から取る文字列

new Elementで画像作るときにサムネイルの縦横サイズを取得して、
指定した倍率をかけて元の画像サイズに設定してます。
同じ比率で縮小してないとサイズが狂うので注意。

サムネイルクリック時のborderが必要なければ、addevent function内にある
thumb.each(function()のくだりを削除する。

“Image change script02” をダウンロード

WTN-imgChange02.zip – 2112 回のダウンロード – 227.10 KB

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください