• ベストアンサー

jQueryについて

skitterのサムネイルについて skitterというjQueryを使っています。http://thiagosf.net/projects/jquery/skitter/ サムネイル表示をしているのですが、このサムネイルは表示画像の左下の部分を切り取った物が表示されるのですが この画像を表示している画像の縮小版を表示することはできないでしょうか? よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

CSSの調整で可能かと思います。 例えば、デモのままのデータを利用するとして .box_skitter .info_slide_thumb .image_numberで  width:100px; → width:133px; .box_skitter .info_slide_thumb .image_number img で  top:-30px;  → top:0;  left:-30px;  → left:0;  height:100px; → height:50px; に修正すれば、ほぼ全体の画像の縮小版になります。 (元画像が800×300なので、約133×50に表示される)

akiharu0101
質問者

お礼

ありがとうございます。 おかげで、希望に合う表示にすることができました。 大変助かりました。 本当に、ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • jQueryのプラグイン「Skitter」について

    下記サイトで配布されているjQueryのプラグイン「Skitter」について、 質問させて下さい。 http://thiagosf.net/projects/jquery/skitter/ スライドショー用にjQueryの良いプラグインはないかと探して見つけたのが、 このSkitterで、実装も簡単だしアニメーションのエフェクトも多彩で、お気に入りです。 質問は、スライドショーが無限にループしてしまうのを、 最後の画像がきたところで、ストップさせる、 というカスタマイズが出来ないかという事です。 ファイルの中身を見たり、検索エンジンも使ってみましたが、 答えが見つけられず、思い切って質問してみました。 わかる方いらっしゃいましたら、ぜひお教え願いたいと思ってます。 よろしくお願いしますm(_ _)m

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

    「Skitter」というJavascriptのスライドショーを少しカスタムして使おうと思い、 コードを見ていろいろ試したのですが、うまくいきません。 ▼「Skitter」元はこちらです http://thiagosf.net/projects/jquery/skitter/ ナビゲーションのタイプを「Numbers」「Thumbs」「Dots」の3種類から選べるようになっていて、私は「Thumbs」と言うサムネイルが表示されるタイプを選びました。 さらにサムネイルのサイズを小さく(80px x 50px)したくて、 「skitter.styles.css」や「jquery.skitter.js」のここかな、と思う箇所を 端から変更して表示を試してみてるのですが、意図したサイズになかなかなってくれません。 過去の質問やネットにはサイズ変更に関する記事は見つけることができませんでした。 どこをいじれば良いのでしょうか? わかる方いらっしゃいましたら、教えて頂けませんでしょうか? どうぞよろしくお願い致します。

  • 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

  • skitter(jquery)での初期表示画像

    skitter(jquery)で画面を開いた時に移動した状態で開くことは出来ますでしょうか。 たとえば20個画像があって、画面を開いた時に10番目の画像を表示を表示し、 サムネイル一覧も10番目の画像がアクティブになっている状態にしたいです。 image_iに10を渡すとかjumpToImageを呼び出すとか試したんですけど、 どうにもうまくできません。 お願いいたします。

  • ページ横スクロールでjQuery lightBox

    横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin (http://leandrovieira.com/projects/jquery/lightbox/) を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。(拡大時の背景のオーバーレイもずれている) これを、サムネイルのあるページ上に表示させるようにしたいのですが、javascriptがよくわからないので、どのように修正したらよいか教えていただけないでしょうか。

  • jQueryプラグイン「Skitter」でリンク

    jQueryプラグイン「Skitter」でリンクについて jQueryプラグイン「Skitter」でリンクについてわからないことが2点ございます。 まず、画像の淵に青色のラインが入る(IMGの「 border="0"」が効かない) あと、インラインフレーム内で動かし、変わる画像のリンク指定を全ウィンドウ(target="_parent")に指定したいのですが、これもうまくいきません。。。 ぜひお助けいただきたいと思っております。よろしくお願いします。 ↓例えば下記のように3つの画像を指定した場合にborderもtargetもききません。 <div class="box_skitter box_skitter_large"> <ul> <li> <a target="_blank" href="http://www.yahoo.co.jp/"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0" class="circles" ></a> </li> <li> <a target="_blank" href="http://www.google.co.jp/"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0" class="circles" ></a> </li> <li> <A target="_blank" href="http://www.rakuten.co.jp/"><IMG src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0"></A> </li> </ul> </div>

  • twitterとjqueryのバッティングについて

    はじめまして、jquery.showcase.jsとtwitterウィジットの件で質問させてください。 twitterウィジットとjquery.showcaseを同じHTML内で動作させたいのですが、 IE6~9とchromで見ると、大画像にマウスオーバーすると表示されるサムネイル(大画像にも)に、登録していない画像が2枚余分に表示されてしまいます。 納期も近づいており大変困っております。 正しい枚数ぶんだけ読み込ませたいのですが、どなたか助けていただけませんでしょうか? 「サンプル」 http://www.im-data.co.jp/corporation/kimoto/hatena/ ちなみにjquery.showcaseに表示させたい画像は1枚~5枚。 IE6~9とchromでは、パス不明の<img/>がサムネイル、大画像ともに2枚追加されてしまいます。firefox3.6では正常に表示されます。 宜しくお願い申し上げます。

  • jQuery版のlightbox.jsについての質問です。

    jQuery版のlightbox.jsについての質問です。 配布元:http://leandrovieira.com/projects/jquery/lightbox/ お客さまから、1つの画像から複数の拡大画像にリンクさせたいという要望があって困っています。 a要素に「lightbox」というclassが指定されているとlightboxが動くようになっており、 お客様の方で下記のソースコードで一応実現できているようなのですが バリデータでエラーがあるのでもっと良いやり方はないか、というご要望です。 <a href="拡大画像1" class="lightox"><img src="縮小画像1"></a> <a href="拡大画像2" class="lightox"></a> <a href="拡大画像3" class="lightox"></a> 上記のソースで、縮小画像1をクリックすると拡大画像1に「next」が付いて次の拡大画像も表示出来るようになりますが、1つ目以外のa要素が当然空になるので文法上よくない状態です。 文法もおかしくなく、1つの縮小画像から複数の拡大画像を表示していくことは可能でしょうか。 JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら、教えていただけるとありがたいです。 よろしくお願いいたします。

  • Jqueryの超初心者です

    いつもはコピペで作業しています。 こちらのサイトを参考にサムネイル画像をクリックするとメイン画像が切り替わるページを作成しています。 http://memocarilog.info/jquery/7477 表示されたメイン画像に外部リンクを設定するにはどう記述したら良いでしょうか? お願いします。

  • jQuery等で背景をフル表示+スライドショー

    http://www.daichifive.com/ ↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、 サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。 画像は3枚で、3枚目の画像だけ、縦長になっているので、 背景が3枚目になったときだけ縦スクロールバーを付けて、 上から下まで見れるようにしたいです。 サムネイルを出して、次の画像に切り替えるくらいですと、 jQueryを探せば何かあると思うのですが、 3枚目だけ縦スクロールバーをつけることなどできるのでしょうか。 できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか? jQuery以外の方法でも、上記のような動きを実装できるやり方があれば ご教授いただけないでしょうか。 よろしくおねがい致します。

    • ベストアンサー
    • CSS