「Skitter」というJavascriptのスライドショーを少しカスタムして使おうと思い、
コードを見ていろいろ試したのですが、うまくいきません。
▼「Skitter」元はこちらです
http://thiagosf.net/projects/jquery/skitter/
ナビゲーションのタイプを「Numbers」「Thumbs」「Dots」の3種類から選べるようになっていて、私は「Thumbs」と言うサムネイルが表示されるタイプを選びました。
さらにサムネイルのサイズを小さく(80px x 50px)したくて、
「skitter.styles.css」や「jquery.skitter.js」のここかな、と思う箇所を
端から変更して表示を試してみてるのですが、意図したサイズになかなかなってくれません。
過去の質問やネットにはサイズ変更に関する記事は見つけることができませんでした。
どこをいじれば良いのでしょうか?
わかる方いらっしゃいましたら、教えて頂けませんでしょうか?
どうぞよろしくお願い致します。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
質問者様はもう解決しているかもしれませんが、私の行った解決策を回答させていただきます。
また私が公式サイトから持ってきた際の元のサイズは 「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;}/*サムネ画像配置場所の1個当たりの確保サイズ*/
.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
- 回答日時:
width_labelではないでしょうか?
$('.box_skitter_large').skitter({width_label: '300px'});
すでに試されていたらすみません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- 画像編集・動画編集・音楽編集 jpgが拡張子の画像を探しています 2 2023/04/06 10:03
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- YouTube youtube 画像のサイズを少し小さくするには 1 2023/02/14 08:55
- Windows 10 この現象も、Microsoft Explorer のお粗末な仕様のためか? 2 2023/06/09 15:06
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- 待ち受け・壁紙 ロック画面に表示される時刻のサイズ変更 AQUOS SENSE 4 (ドコモ)を使用中です。スマホの 2 2022/08/08 10:39
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
神経衰弱 順番に裏返し
-
Slick.jsのオプションrtlについて
-
アコーディオンメニューが開い...
-
スライドショーの画像にリンク...
-
キャラクターがぴょこんと飛び...
-
jQueryでタブ、スライダーを使...
-
MAX関数を使ってからLEFT JOIN...
-
JSPでの画像ファイル表示
-
textareaで入力した文字を改行...
-
iframe内のリンクが飛ばないの...
-
jspでcssが読み込めない
-
jQueryスライドショー画像への...
-
どの<li><a> が押されたか判別...
-
読み込んだQRコードをフォーム...
-
Ctrl+F(検索)の窓を出したいの...
-
javascriptテキストBOX色を元に...
-
1枚の画像をクリックすると複数...
-
jQueryで特定のURLの時のみ表示
-
「jQuery」アコーディオンメニ...
-
css固定したフッターが本文と重...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
jsでグリッドデザインのサムネ...
-
Javaスクリプトで画像を縦にス...
-
複数の要素へ appendchild でき...
-
CSSでマウスオーバーした画像を...
-
【iOS及びAndroid】リンク画像...
-
スライドショー「Skitter」をカ...
-
Dreamweaver上とデバイスプレビ...
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
チェックボックスと画像切替の連動
-
jqueryのプラグインslickの画像...
-
Javascriptを使用したスライド...
-
bxSliderのランダム表示について
-
Firefoxとクロームでフェードイ...
おすすめ情報