ｊｓプラグインのを独学で学習しています

質問

http://kokusai.ecc.ac.jp/
このサイトのトップにあるような、小さい画像にマウスをあてると大きい画像がそれにあわせて
スライドしていくような方法を勉強しており、

どうやらボックススライダーというプラグインと、carouFredSelというプラグインを使ってやっているということがわかりました。
さっそく僕も、やってみたのですが、ボックススライダーの方はうまくいきますが、carouFredSelがうまくいかず、firebugで要素を確認したら　
<div id="thumbs" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 58px; margin: 0px; width: 2070px; height: 38px; z-index: auto;">
となります。
HTMLを確認すると<div id="thumbs">だけなのに、なんでこんなことになるのでしょうか？
また、ここのwidth: 2070px;を 90pｘに変更するにはどこをさわればよいのでしょうか？
困っています。
お願いします・・・

回答No.1

LancerVII · ベストアンサー

こんにちは。

プラグインの中で周りの要素なんかから自動的に計算されているようですので、そこを全て解析して調整するしかないと思います。
(すべてを解析していないのでなんで90pxに変更したいかとか汲み取れてませんが)

まずはこのwidthが何をしている値であるか、それを90pxに変更することが良いことなのか解析しないとダメだと思います。

<div id="thumbs" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 58px; margin: 0px; width: 2070px; height: 38px; z-index: auto;">

こうなるのは、プラグインの中で自動的にスタイルを追加しているからです。
ようは指定されたthumbsという要素にいろいろ手を加えて、動かしているのです。（それがプラグインと呼ばれるもの)

jquery.carouFredSel-6.2.1.jsの中に
function in_mapCss($elem, props) {
}
という関数があります。
このへんで必要なcssを追加して、その後計算された（または設定された）値をセットしているように見えます。

ぱっとしか追っていませんので間違えていたらすみません。

まずは何に利用される値なのか、90pxに変更して動くのか、全て解析しないとどこをどのように変更したらよいかは見えてこないと思います。