• 締切済み

JQueryでサムネ付スライドショークロスフェード

JQueryでクリックを使用せず、自動クロスフェードのサムネイル付きスライドショー&マウスオーバーでもクロスフェードで切り替わるようにするためにはどうすればよいでしょうか? 更にはスライドショーにキャプションがつけられたら最高です。 スライドショーの幅はwidth: 354px; height: 280px;、サムネイルはその下に縦3つ、横3つの計9つ配置します。 スライドショーは自動フォロスフェードによるループ、またサムネイルをマウスオーバーでもその画像にクロスフェードイン、その際スライドショー内に表示されている&マウスオーバーされているサムネイルの画像は罫で仕切るか、半透明がクリアに表示されるといった処理を考えております。 恥ずかしながら調べても分からなかったので、皆さまの知識を拝借したく投稿させて頂きました。 恐れ入りますが、何卒ご助言下さいますよう、よろしくお願い致します。

みんなの回答

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

画像のスライドショー関連のスクリプトはものすごくたくさん作られて公開されています。 もしも使いたいだけであるのなら、(ご要望のイメージを完全には掴めてはいませんが、)検索してみれば、かなり似たものが見つかるはずと思います。 あるいは、もし自作なさるつもりでのご質問でしたら… そのままにピッタリの情報はあまりないかもしれませんが、ご質問のうちの個々の機能の実現方法などは、個別に検索すればほとんどのヒントや回答が見つかることと思います。 それぞれの仕組みを理解した上で全体を考えれば、それほど難しくなくなるのではないでしょうか。 また、その上でわからない部分について具体的にお尋ねになった方が、回答が付きやすいように思います。 現状のご質問のままだと、あまりにも漠としすぎているので「何がわかっていて何がわからないのか」がわからないので、回答者も何を回答したらよいのか迷ってしまうでしょう。

関連するQ&A

  • JQueryを使ったオートスライドショーについて

    Webサイトを作っているのですが、トップページにフェード効果のあるスライドショーを自動切り替えしたいと思っております。 とりあえず今日JQueryをダウンロードしたのですが、JQueryだけではスライドショーの機能を付けるのは難しいのでしょうか? それともスライダー用のJQueryプラグインを使う必要があるのでしょうか? JQueryだけでスライドショーを実現したほうが良いのか、プラグインを使ってスライドショーを実現した方が良いのか、どちらが良いのでしょうか? 双方のメリットやデメリットがあれば教えて下さい。

  • パワーポイントのスライドショーでクロスフェードできます?

    お世話になります。 ある発表会でイメージ画像のスライドショーをします。 スライドショーは、タイミングをみながら マウスクリックで画像をおくっていく方法をとるのですが ここで質問があります。 画像があらわれて消える効果として「クロスフェード」 という効果はパワーポイント(当方Ver.2002です)で 設定できますか?アニメーション効果にはフェードしか なかったので、やはり無理なのでしょうか? 工夫次第でなんとかなるのかと思い質問させて頂きました。 また、パワーポイント以外で私が望んでいるような スライドショーができるフリーソフトがありましたら 教えて下さい。 望んでいる手順と効果はこんな感じです。 クリック1.1枚目の画像がだんだん現れる クリック2.1枚目の画像がだんだん薄らいでいくと       同時に2枚目の画像がだんだん現れる。 クリック3.以降繰り返し・・・ よろしくお願い致します。

  • スライドショーでクロスフェードができるフリーウェア

    お世話になります。 以前に同じような質問をさせて頂いたのですが 事情が変わってしまったので、改めて質問させて頂きます。 ↓以前の質問はコレです。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1824748 ある発表会でイメージ画像のスライドショーをします。 スライドショーは、タイミングをみながら マウスクリックで画像をおくっていく方法をとりたい のですがここで質問があります。 スライドショーができて、画像があらわれて消える効果 として「クロスフェード」という効果が可能な フリーウェアはないでしょうか? パワーポイントのVer.2002以降ならできるのですが 発表会で使用するために借りるノートPCの パワーポイントはVer.2000でクロスフェードができない のです。 望んでいる手順と効果はこんな感じです。 クリック1.1枚目の画像がだんだん現れる クリック2.1枚目の画像がだんだん薄らいでいくと       同時に2枚目の画像がだんだん現れる。       (1枚目と2枚目が入れ替わる途中       画像が重なるような感じです) クリック3.以降繰り返し・・・ よろしくお願い致します。

  • jQueryスライドプラグイン

    jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか? http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。

  • スクロールスライドショー

    https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js を使って モニター横100%で画像のスライドショーを作りたいのですが、 高さは300pxくらいで、3枚表示され、マウス操作かボタンクリックで右や左の画像に代わっていく ご指導お願いいたします。

  • jQueryのスライドショーについて

    jQueryのスライドショー「Elastic Image Slideshow with Thumbnail Preview」に関して、 お分かりになる方がいらっしゃればご教授いただけますでしょうか? ■Elastic Image Slideshow with Thumbnail Preview http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/ ご質問の内容ですが、 現在、スライドを autoplay: true, に設定し、自動で再生(スライド)しています。 ただ、スライドバーをクリックすると、自動再生が停止していまいます。 スライドバーをクリックしても、停止しないコード追加もしくは、削除箇所などをお教えいただけますでしょうか。 よろしくお願い致します。

  • jQueryのスライドショーのカスタマイズについて

    仕事であるサイトを作っているのですが、製品ページの所で製品画像をスライドショーにして実装しようと思っており、jQueryで理想に近いプラグイン(galleriaというものです)を発見したのですが、スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ自分でカスタマイズしようとやってみましたがうまくできません。 皆様のお力をお貸しいただけないでしょうか。 ■galleriaのプラグインを使ってカスタマイズする内容 galleriaのサイトからファイルをダウンロードし(http://galleria.aino.se/download/)メイン画像(サムネイルの上にある画像)内、もしくは外に「拡大画像」というボタンを設置し、クリックするとモーダルウィンドウで拡大画像が表示されるようにしたい。 ■自分でうまくできないところ このプラグインはサムネイル、もしくは左右にある矢印をクリックすると画像が変わる仕様になっており、「拡大画像」ボタンに今表示されているメイン画像を判別させて拡大画像を表示させる処理が必要となると思うのですが、うまくいきません。 モーダルウィンドウはthick.box(http://jquery.com/demo/thickbox/)を使って表示させています。 その他に、もっと簡単にできる方法など教えていただければ助かります。 よろしくお願いいたします。

  • jqueryでスライドショーができない。。

    jqueryでスライドショーを完成させたいのですが、 以下の記述ではページを読み込むと最初の1枚目の画像が現れて、 消えたところで止まってしまいます。 この動作を繰り返して次々と画像を変えていきたいのですが、 どう修正すれば動くでしょうか? お分かりの方、ご教授ください><; よろしくお願いします。

  • jQueryでスライドショーを作っているのですが

    jQueryを使用し、下記URLの様な画像がスライドショーになるサイトを製作しているのですが、 (http://maxb.net/scripts/jbgallery-2.0/docs/nomenu.html) JavaScrip初心者の為、スライドショーを最後の画像でストップするやり方が分からず 困っております。 スライドショーにはjbgallery-2.0.jsといファイルを使用しております。 (ファイルを製作された方のサイトはこちら:http://maxb.net/scripts/jbgallery-2.0/) スライドショーが最後の一枚でストップする方法をおわかりの方がいらっしゃいましたら、 ぜひ教えていただきたいと思っております。 ご教授のほど、何卒よろしくお願いいたします。

  • クリックでスライドショー

    http://lab.komadoya.com/javascript/crossFader/#cf2 上記サイトのようなフェードイン・フェードアウトのスライドショーに 以下のような動作を追加したいと思っています。 画像をクリックしたら再生し、最後の画像でストップ。 もう一度クリックで1枚目の画像に戻る。 色々調べたのですが、マウスオーバーや自動再生のものが多く 思ったものが見つかりませんでした。 画像(1)、画像(2)、画像(3)とあり、 画像(1)クリックで、(1)→ (2)→ (3)でストップ。 もう一度クリックで(1)に戻る。 といったイメージです。 お分かりの方がおられましたらご教授頂けたら幸いです。 どうぞ宜しくお願いします。

専門家に質問してみよう