- 2008-07-22 (火) 20:36
- MooTools
前に書いたサムネイルにマウスオーバーしたら画像を切り替える を、
mootools1.2使ってフェードインとかつけたサンプル。
注意※ソースはmootools1.2用なので1.1では多分動きません。
HTML:
-
<div id="change_image">
-
<div id="view">
-
-
<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">
-
</ul>
-
-
<p class="cl">右の画像をクリックすると大きな画像が表示されます。</p>
-
</div>
コメントはサムネイルと同じ順番で全部ソースの中に書いて、styleでdisplay:noneにしておく。
サムネイルとコメントはソース上のを勝手に拾う。
jsソースは書き散らして長いので設定以外割愛。ファイル見てください。
JavaScript:
-
var viewarea =$('myImg'); // メイン画像のある要素のＩＤ
-
var thumb = $("thumbs").getElements("img"); // サムネイル画像のあるＩＤ（前者）
-
var comment =$$('p.comment'); // コメントの要素とクラス
-
var mag = 4; //サムネイル縮小率
-
var regrep = "_thumb"; //サムネ画像の名前から取る文字列
new Elementで画像作るときにサムネイルの縦横サイズを取得して、
指定した倍率をかけて元の画像サイズに設定してます。
同じ比率で縮小してないとサイズが狂うので注意。
サムネイルクリック時のborderが必要なければ、addevent function内にある
thumb.each(function()のくだりを削除する。
ダウンロード：Image change script
