2008/9/20

mootoolsを使って動くnoobSlideのカスタマイズ覚書

noobSlide – mootools

noobSlideというmootoolsを使って動くギャラリーの導入をしました。Sample7というサムネイルをクリックすると画像がスライドしてくれるタイプを使ったのですが、デフォルトの設定より大きい画像で作ろうとしたところ、CSSを調整しても全然うまくいきません。それもそのはず、調整するべきはCSSではなくJava Scriptだったのです。

デフォルトはどうやら240px幅の画像で作成することを想定しているらしく、大きい画像を表示するにはSizeというプロパティをセットしなければいけなかったようなのです。

box: $(‘box7’),
items: [0,1,2,3,4,5],
size: 590,←これを追加!
handles: $$(‘#thumbs_handles7 span’),
fxOptions: fxOptions7,
onWalk: function(currentItem){
thumbsFx.start(currentItem*60-568);
},

出張先で3時間悩んだ挙句、わからず、寝起きに英語のブログサイト回ってヒントを得、試しに入れてみたら解決しました。CSSを散々いじったのが馬鹿でした。まあ、どちらにしてもWEBデザインにフィットさせるにはCSSのカスタマイズ必要なので、構造が理解できたので良かったとしましょう。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram

(2012-10-5)
売り上げランキング: 14,705
100円