• 締切済み

縦にスライドするサムネイルについて

下記のサイトのソースを参考にしています。 http://www.leigeber.com/2008/05/ajax-image-gallery-slideshow/ この横にサムネイルスクロールするやつを縦にスクロールするように変えたいのです。 ソースが長すぎてココには書けないのですが、デモのソースから是非ヒントを教えてもらえませんか??

みんなの回答

noname#84373
noname#84373
回答No.1

サンプルコードにあったCSSファイルの以下の部分のwidthの値を見て! #thumbs {position:absolute; list-style:none; margin-left:5px; height:100px; width:10000px; border-right:5px solid #FFF} 横に対して10000pxもとっているけど縦に対しては? なので縦に対しては対応してないかもよ? slide.jsをいじるのなら .offsetLeft あたりを .offsetTopにかえるとか・・・

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

関連するQ&A

  • TinySlideshow(http://www.leigeber.c

    TinySlideshow(http://www.leigeber.com/2008/12/javascript-slideshow/) デモ:http://sandbox.leigeber.com/javascript-slideshow/ ソース:http://forum.leigeber.com/index.php?app=downloads&module=display&section=download&do=confirm_download&id=6 ↑こちらのソースをカスタマイズして使用させていただこうと思っています。 変更したいのは、script.jsの51~53行目です。 g.onmouseoverに対して、2つのイベント(サムネイルの透明度変更)と(大イメージの表示→デフォルトソースではonclickで実行)を同時におこしたいのですが、うまくいきません。(後に書いたもののみ動作します。) 現状の該当部分のソースは、下記の通りです。 g.onmouseover=new Function('TINY.alpha.set(this,100,5)'); g.onmouseover=new Function(this.n+'.pr('+i+',1)'); g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)'); g.onclick=new Function('window.location="'+a.l+'"'); 解決策をご教示いただけますと幸いです。 何卒よろしくお願いいたします。

  • サムネイルについて

    サムネイルをクリックすると、大きい商品画像&説明文を表示させたいのですが、どうすればいいのでしょうか? 説明文はテキストフィールドで収まるようなものでなく、テーブルを使って詳しい商品説明をし、レイアウトしたいのですが…。 ↓このページの表示がイメージに近いです。 http://www.chimudon.com/home/gallery/gallery.cgi?mode=main&action=view&no=11&photono=1&tailno=.jpg&wno=363&hno=282

  • 横スクロールを縦スクロールに変換したい

    ちょっと違うのですが、こちらのサイトをご覧ください。 http://www.rinkokikuchi.com/# このサイトでは横スクロールデザインですが、マウスの縦スクロールをしても横にスクロールできるようになっています。 私が今困っているのはパララックスを使った縦スクロールのサイトを作っているのですが、 マウスのホイールを横にスクロールした際にもサイトを縦にスクロールできる様にしたいのですが、分かりません。 縦横どちらでもスクロールできる様にしたいです。 どなたか教えて頂けませんでしょうか。

    • 締切済み
    • CSS
  • Flickrのような綺麗なサムネイルを作りたい

    FlickrのAPIで取得したサムネイルは非常に画質が綺麗なので、Flickrのサムネイルに近いくらいのサムネイルを作りたいと思っているのですが、ある疑問が浮かんで来ました。 サンプルページ http://sampleyoudesu.blog.fc2.com/blog-entry-2.html FlickrのAPIを利用してサンプルページを作ってみました、Flickrのサムネイルの大きさは全て、縦横85×85pxになっています。 Flickrから読み込んでいるサムネイルの元の画像はほとんど正方形ではないはずなのですが、どうしてこんなに綺麗なサムネイルになるのでしょうか? 縦300の横の200の画像をソフトを利用して85×85の大きさにしても、元の画像が正方形ではないためFlickrのような綺麗なサムネイルは出来上がりません。どうすればFlickrのような綺麗なサムネイルが出来上がるのでしょうか? 綺麗なサムネイルが作れるソフトや方法がありましたら、ぜひ教えていただけると幸いです。

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

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

    • ベストアンサー
    • CSS
  • スライドのカスタマイズについて

    こんにちは。jsの知識が無く、いろいろやってはみたのですが、上手くいきません。力になって下さい。 下記のスライドを1ページ中に複数設置したい場合、どのように改造すれば良いですか?最大3つ設置したいです。よろしくお願いします。 http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption #galleryを#gallery2とかにして増やすのですよね?でもその先が・・・よろしくお願いします。

  • Javaを使ったスライドショーを作りたい!

    http://www.webcitron.com/works/calendar/view/index.html こちらのウェブショップの様に、サムネイルをクリックすると、 スライドショーの様なものが表示されるギャラリーを自分のHPに作りたいと 思っているのですが、これはJavaSprictで作るのでしょうか? 自分でも調べてみたのですが、どういった検索をかけていいかも分からず困っています。 具体的に作り方と設置方法が知りたいです。 タグやソースなど、教えて下さい。よろしくお願いします。 漠然とした質問のうえに、伝わりにくい文章で申し訳ありません。

  • このサイトの動きを再現したい

    フラッシュ初心者なのですが、 下記URLのサイトの動きを、ほぼそのまま再現しなくてはならなくなりました。 http://www.werkstette.dk/#/gallery/ 作成するのはギャラリーサイトで、写真の追加があるそうです。 サムネイルをクリックした先のギャラリー部分は調べてできたのですが、 オンマウスでサムネイルが出てくる動きや、ナビゲーション部分全体の動きなど、 まだどうなっているのかわからない箇所がたくさんあります。 14日までに作成しなくてはならないため、焦っています。 動きのヒントとなりそうな参考サイトを教えてください。 よろしくお願いします。

  • 縦と横へ同時にアニメーションするスライドメニュー

    javacriptで縦もしくは横へスライドするアコーディオンメニューの サンプルスクリプトはよくあるのですが、ボタンをクリックまたはロールオーバーすると そのボタンから同時に縦と横へメニューが伸びていくようなメニューを作成したいと思っています。 (ボタンを基点にL字型にのびていくようなかんじです) http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-display-elements-sequentially-with-jquery/ で紹介されているjQueryのスクリプトは近いのですが、これはクリックすると 一つ一つliタグでコーディングされた部分がスライド的に現れるものですが このスクリプトの場合開くにあたる動作しかできません。 ロールオーバーで展開し、マウスアウトで閉じたいと思っています。 できれば開くときの逆方向のアニメーションでできればベストなのですが こういった動きをどうすればよいのか、 こういった動きが再現できるプラグインやスクリプトの書き方など、 ご存知のかたがいらっしゃいましたらご教授お願いします。

  • HPに縦の罫線を入れる方法

    HPで区切りとしてよく罫線を利用します。 横の場合は、ソースで<HR>と入れると表示されますよね。 表組に入れれば、表の幅に応じて引かれますし、%で長さも調整可能です。 ですが、縦の場合どのように引けばいいのか分かりません(T-T) 参考に、↓このようなイメージというHPがありますのでご覧下さい。 http://www.census-shizuoka.jp/traffic.html ページ(文章のボリューム)によって、縦線の長さが違いますよね。 どのように作られているのか、ソースをコピーしてHPビルダーで 見てみましたが、縦の線が表示されませんでした…。 こうすれば作れるよ、とおっしゃる方、ご回答の程宜しくお願いします。

    • ベストアンサー
    • HTML