- 締切済み
スライドショー「Skitter」をカスタムしたい
attyonnの回答
- attyonn
- ベストアンサー率41% (10/24)
width_labelではないでしょうか？ $('.box_skitter_large').skitter({width_label: '300px'}); すでに試されていたらすみません。
関連するQ&A
- jQueryプラグイン「Skitter」について
jQueryのプラグイン「Skitter」の表示で、thumbsの表示で質問させてください。 http://thiagosf.net/projects/jquery/skitter/ 表示には「Numbers」「Dots」「thumbs」の3種類あり、「thumbs」でサイト作りをしているのですが、 「Numbers」「Dots」では表示されるlabelが、「thumbs」では表示されず、困っています。 javascriptの設定は下記のようにしています。 <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({thumbs: true, label: true}); }); </script> labelを表示するかしないかで、“label: true”にしているのですが、これでは表示されません。 オプションを見ても、そのあたりの記載が見当たらず、どこを調整すればいいのか分らずにいます。 どなたかご存知の方、いらっしゃいましたらご教授をお願い致します。m(__)m
- ベストアンサー
- JavaScript
- ｊQueryについて
skitterのサムネイルについて skitterというｊQueryを使っています。http://thiagosf.net/projects/jquery/skitter/ サムネイル表示をしているのですが、このサムネイルは表示画像の左下の部分を切り取った物が表示されるのですが この画像を表示している画像の縮小版を表示することはできないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 教えてください! lightboxとskitter
javascriptがまだよく理解できていないので、 愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。 記述に問題があるんでしょうが、調べても全くわからないので こちらに投稿させていただきました。 どなたかこの問題の解き方をお教えください。 よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <!--lightbox--> <script src="js/prototype.js" type="text/javascript"></script> <script type="text/javascript" src="js/builder.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/smartRollover.js"></script> <!--smartRollover--> <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css"> <!--Skitter--> <style type="text/css"> .box_skitter_large{ width:490px;height:190px; } </style> <script type="text/javascript" src="js/skitter_js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.skitter.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({interval: 8000}); <!--数字を大きくするとSkitterの時間がゆっくりになる--> //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>
- ベストアンサー
- JavaScript
- jQuery等で背景をフル表示＋スライドショー
http://www.daichifive.com/ ↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、 サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。 画像は３枚で、３枚目の画像だけ、縦長になっているので、 背景が３枚目になったときだけ縦スクロールバーを付けて、 上から下まで見れるようにしたいです。 サムネイルを出して、次の画像に切り替えるくらいですと、 jQueryを探せば何かあると思うのですが、 ３枚目だけ縦スクロールバーをつけることなどできるのでしょうか。 できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか？ jQuery以外の方法でも、上記のような動きを実装できるやり方があれば ご教授いただけないでしょうか。 よろしくおねがい致します。
- ベストアンサー
- CSS
- jQueryのプラグイン「Skitter」について
下記サイトで配布されているjQueryのプラグイン「Skitter」について、 質問させて下さい。 http://thiagosf.net/projects/jquery/skitter/ スライドショー用にjQueryの良いプラグインはないかと探して見つけたのが、 このSkitterで、実装も簡単だしアニメーションのエフェクトも多彩で、お気に入りです。 質問は、スライドショーが無限にループしてしまうのを、 最後の画像がきたところで、ストップさせる、 というカスタマイズが出来ないかという事です。 ファイルの中身を見たり、検索エンジンも使ってみましたが、 答えが見つけられず、思い切って質問してみました。 わかる方いらっしゃいましたら、ぜひお教え願いたいと思ってます。 よろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- JQueryでサムネ付スライドショークロスフェード
JQueryでクリックを使用せず、自動クロスフェードのサムネイル付きスライドショー&マウスオーバーでもクロスフェードで切り替わるようにするためにはどうすればよいでしょうか？ 更にはスライドショーにキャプションがつけられたら最高です。 スライドショーの幅はwidth: 354px; height: 280px;、サムネイルはその下に縦3つ、横3つの計9つ配置します。 スライドショーは自動フォロスフェードによるループ、またサムネイルをマウスオーバーでもその画像にクロスフェードイン、その際スライドショー内に表示されている&マウスオーバーされているサムネイルの画像は罫で仕切るか、半透明がクリアに表示されるといった処理を考えております。 恥ずかしながら調べても分からなかったので、皆さまの知識を拝借したく投稿させて頂きました。 恐れ入りますが、何卒ご助言下さいますよう、よろしくお願い致します。
- 締切済み
- JavaScript
- スライドショーの画像サイズが変わってしまいます
jQuery.Showcaseを使って、画像が切り替わる簡単なものを使っています。 この間画像を増やし、サイズを少し大きく変更（横幅は変わりません）しました。 私のほうではきちんと表示されましたが、違う人が見たらIEのみ縮小された状態で表示されたそうです。 全部が小さく表示されるのではなく、何枚かは普通のサイズで出てくるらしいです。 私のほうでは小さくなっているのが確認できないため、原因がよく分かりません。 今まで何回も使いましたがこんなことは初めてで、なにか分かる方がいらっしゃいましたら教えてください。 お願いします。
- ベストアンサー
- JavaScript
- skitter(jquery)での初期表示画像
skitter(jquery)で画面を開いた時に移動した状態で開くことは出来ますでしょうか。 たとえば20個画像があって、画面を開いた時に10番目の画像を表示を表示し、 サムネイル一覧も10番目の画像がアクティブになっている状態にしたいです。 image_iに10を渡すとかjumpToImageを呼び出すとか試したんですけど、 どうにもうまくできません。 お願いいたします。
- 締切済み
- JavaScript
- 4：3とパノラマ写真の混在スライドショーについて
ホームページに写真のスライドショーを用意しています。 他板でのアドバイスで動かなくなったものが動くようになりました。 写真の表示もできるようなって良かったのですが、 若干問題があり、アドバイスをお願いしたいのです。 ＯＳ：win7 ＩＥ：１１ 下記のソースを頂きましたが・・・・ 写真 4：3表示・・・全体が表示されない（はみ出した感じ） 写真サイズ 800×600ですが → 1068×800と表示サイズが大きくなっています パノラマ：高さに合わせて左右がカットされたようになります。 800×284ですが → 2254×800の表示サイズの様です これも大きくはみ出しています どちらも、height:600pxとなっていますが、web上では800pxになっています ●なぜ高さが600pxの設定が有効にならないのか 狙いは、横方向800pxでパノラマにも対応したい （パノラマの場合、高さ方向は低く表示する） <STYLE type="text/css"> #container {width:100%;text-align:center;} #slideshow {margin:0 auto;width:800px;height:600px;text-align:left;} #slideshow div {width:800px;height:600px;overflow:hidden;position:relative;} #slideshow div div {top:0;left:0;position:absolute;} #slideshow ul {width:800px;} #slideshow ul li {width:100px;height:75px;float:left;display:inline;} #slideshow .active {filter:alpha(opacity=100)!important;-moz-opacity:1!important;opacity:1!important;} --> </STYLE> 4：3の写真（800：600）の全体表示 パノラマ写真800サイズの高さは自動調整 ができると良いのですが・・・ ここまで書いて、素人ですというのも申し訳ないように思いますが アドバイスをいただけないでしょうか
- ベストアンサー
- HTML
- CrossSlideのスライドショーが中央に設置で
CrossSlideのスライドショーが中央に設置できなくて困っています。左端には問題なく設置できて動くのですが、中央に指定しても、中央に作ったテーブルの中に入れても、テーブルの中央に入れても、そのまま左端にしか表示されません。 どうしたら中央に表示させることができるでしょうか。 宜しくお願い致します。 下記は、そのソースです。 画像は14ありますが、省略して2個に書き直してあります。 W7で、ブラウザはFireFoxです。 宜しくお願い致します。 <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery.cross-slide.min.js"></script> </head> <body bgcolor="#000000"> <div id="slidedisp" style="width:800px;height:300px;"></div> <p align="center"> <script type="text/javascript"> $('#slidedisp').crossSlide({ fade: 1 },[ { src: '1.jpg', from: 'center center 1.5x', to: 'center center 0.8x', time: 4.0 }, { src: '2.jpg', from: 'center left 1.0x', to: 'bottom right 1.0x', time: 4.0 } ]); </script> </p> <p> </p> </body> </html>
- ベストアンサー
- JavaScript