今回小さなサムネイルを敷き詰めて、マウスオーバーしたら大きく見せるためにjQueryプラグインを導入しました。
このMac風Dockを実現するプラグインはいくつかありますが、今回はjqDockを利用しました。
１．jqDockソースの記載
<script type="text/javascript" src="jquery.jqDock" />
２．jqDockの発動
※スクリプト部 <script> $("#dock").jqDock({ align:'middle', size:70, coefficient:3, distance:130, labels:false, duration:500, source:function(){return this.src;} </script> ※HTML部 <div id="dock"> <img src="aaa.jpg" /> <img src="bbb.jpg" /> <img src="ccc.jpg" /> </div>
かなり適当ですが・・・
jQueryでDockにする対象のオブジェクト（上記では"div#dock"）に対して、jqDockファンクションを用いて設定します。
オプションは何も指定しなければデフォルト値で作成されます。
ちなみに上記のオプションでは、
・align:'middle' 垂直の並びを中央にする
・size：70 初期状態（マウスオーバーしていない状態）での画像表示サイズ。多分縦or横のどちらかをpx指定しているのだと思う・・・すみませんちゃんと調べてませんm(__)m
・coefficient,distance,durationなどは並べた画像の距離感やマウスオーバー具合についてのオプション。詳細は公式サイトを参照。
・sourceについてはよくわかりません、ゴメンナサイ。
その他注意として、マウスオーバーした際は元の画像サイズにまで拡大するらしい。
つまり、元画像以上のサイズに伸ばせないし、それぞれの画像間でサイズを統一したい場合には元画像を同じサイズにしておく必要があります。
今日はこのへんで。
