スライドショー「Skitter」をカスタムしたい

質問

「Skitter」というJavascriptのスライドショーを少しカスタムして使おうと思い、
コードを見ていろいろ試したのですが、うまくいきません。

▼「Skitter」元はこちらです
http://thiagosf.net/projects/jquery/skitter/

ナビゲーションのタイプを「Numbers」「Thumbs」「Dots」の3種類から選べるようになっていて、私は「Thumbs」と言うサムネイルが表示されるタイプを選びました。

さらにサムネイルのサイズを小さく（80px x 50px）したくて、
「skitter.styles.css」や「jquery.skitter.js」のここかな、と思う箇所を
端から変更して表示を試してみてるのですが、意図したサイズになかなかなってくれません。
過去の質問やネットにはサイズ変更に関する記事は見つけることができませんでした。

どこをいじれば良いのでしょうか？
わかる方いらっしゃいましたら、教えて頂けませんでしょうか？
どうぞよろしくお願い致します。

回答No.2

yo_ma_ill

質問者様はもう解決しているかもしれませんが、私の行った解決策を回答させていただきます。
また私が公式サイトから持ってきた際の元のサイズは　「70px * 40px」 でしたので、質問者様のサイズは大きくなってしまうと思われます。

サイズ変更についてですが、
まず「jquery.skitter.js」で226～228行目(行数は元ファイルから変更が無ければ)

self.settings.animateNumberOut = {opacity:0.2, width:'80px'}; // 下サムネ横幅
self.settings.animateNumberOver = {opacity:0.5, width:'80px'}; // 下サムネ横幅
self.settings.animateNumberActive = {opacity:1.0, width:'80px'}; // 下サムネ横幅

元ファイルでは70pxになっている横幅を80pxにします。

次に241行目

.height(60) // 下サムネ黒枠縦幅js側

ご希望の画像縦幅+10px(空けたい隙間分)を記入で、js編集は終了です。

今度は「skitter.styles.css」を編集します。19～22行目を

.box_skitter .container_thumbs {position:relative;overflow:hidden;height:60px;}/*下サムネ黒枠縦幅CSS側*/
.box_skitter .info_slide_thumb {-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:55px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}/*サムネ画像配置場所の１個当たりの確保サイズ*/
.box_skitter .info_slide_thumb .image_number {overflow:hidden;width:80px;height:50px;position:relative;}/*サムネ画像サイズ*/
.box_skitter .info_slide_thumb .image_number img {position:absolute;top:0px;left:-60px}/*指定画像に対するサムネ画像の切り取り開始位置。マイナスで指定。指定画像に合わせて調整*/

これで出来るはずです。各行のコメントは私の認識です。本当の意味とは違うかもしれませんが、
上記コメの認識で扱えば上手くいきました。

私も自己解決の前にネット上を探して、この質問は目に留まっていたので、
そういった探す方々のお役にたてば幸いです。

回答No.1

attyonn

width_labelではないでしょうか？
$('.box_skitter_large').skitter({width_label: '300px'});
すでに試されていたらすみません。