• ベストアンサー

jquery(js)にて実装したいスライドショー

jquery(js)にて実装したいスライドショー機能があります。 参考サイト http://j-sen.jp/kanto/city_411_1.htm サムネイル画像下の "他の写真を見る"の左右の矢印をクリックでサムネイルが 切り替わる機能です。 写真のＵＲＬはシステムにより吐き出すため, 枚数は決め打ちではないので、配列に画像URLを入れていくとは思うのですが、 うまくソースがかけません。 地頭のある方、何卒力添え宜しくお願いいたします。

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

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

サムネイルがあるのでしょうから、簡単そうな方法のひとつとして、拡大表示中のサムネイルにactiveなどの（なんでもよいですが）クラスを設定しておいて、矢印がクリックされたら、その次／前の画像を拡大表示してあげるというのが考えられます。 クラス設定をしなくても、拡大表示中の画像の順番（インデックス）を変数に記憶しておくような方法でも同様に処理ができるでしょう。 他にも、いろいろ方法はあるとおもいますが、ご参考まで。

boujyakubuzinn
質問者

お礼

なるほど、、、ありがとうございます！

その他の回答 (1)

回答No.1

うまくかけないソースはどこまでかけたの？ 0から作ってって事？ 力添えはするけど、0からは作れないよ。

boujyakubuzinn
質問者

補足

ありがとうございます。ソース記載します。 jqueryでいわゆる小さいサムネ画像をクリックしたらそのaのhrefを取得して メイン画像部分に表示、見た目はフェードインフアウトさせる、 まではつくりました。 これを基に、参考サイトのように 「左右の矢印をクリック時に、配列から順にとりだしたurlにsrcを変更し、 かつ最初(or最後)の値の時ループさせる」 の機能を追加するところで、躓いています。 //メイン画像をサムネクリックで変化 $('.thumb-image a').click(function() { var thishref = this.href; $("img#main-position").fadeOut('fast',function() { $(this).attr("src",thishref).fadeIn('fast'); }); //a の無効化 return false ; });

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

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

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

    • ベストアンサー
    • CSS
  • prototype.jsとjquery.jsの併用がうまくいきません。

    prototype.jsとjquery.jsの併用がうまくいきません。 2つの機能をページに組み込みたいと思っています。 (1)横並びの画像が自動的にスクロールする (2)画像をクリックすると、ライトボックスで表示する 参考にしたのは下記のサイトです。 http://logicbox.net/jquery/simplyscroll/ http://www.lokeshdhakar.com/projects/lightbox2/ しかし、実際にページを作ってみるとどちらかの機能しか有効になりません。 どちらもいくつかのjsファイルを<script>タグで読み込みますが、 後から読み込んだ方しか有効に機能しないのです。 スクロールの方はjquery.jsを、ライトボックスの方はprototype.jsを使っているのですが、 それが良くないのでしょうか。 両方を機能させるにはどう直したらいいのか、ご教授下さい。 もしくは、両方がうまく機能しているサイトがあれば、URLを教えて下さい。 よろしくお願いします。

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

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

  • 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/） スライドショーが最後の一枚でストップする方法をおわかりの方がいらっしゃいましたら、 ぜひ教えていただきたいと思っております。 ご教授のほど、何卒よろしくお願いいたします。

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

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

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

    jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを 参考にしようとしています。皆様のお知恵をお貸しいただければ 幸いです。 http://jsdo.it/alicex/45Jv 実際に配置して、ブラウザチェックを行ったのですが、 (1)Chrome・Firefoxだと、スライドショーを配置しているページから離れて 戻ってきた際に、離れていた時間分だけスライドショーのメインイメージが暴走 して、勝手に動いてしまいます。 (2)また、サムネイル上でカーソルを高速で通過させると、 させた分だけ記憶してメインイメージが変化してしまいます。 (1)のバグを無くしたいのと、(2)は、今カーソルを合わせている サムネイルに対応したメインイメージにすぐ変化して欲しいです。 jsに原因があると思うのですが、どの部分を修正すればよいでしょうか。 $(function() { var thumb = $("#thumbnail"); var main = $("#main"); $("li:first-child",thumb).addClass("on").children("img").hide(); $("li:not(:first-child)",main).hide(); slider(); $("li",thumb).hover(function() { $("li",thumb).removeClass("on").children("img").show(); $(this).addClass("on").children("img").hide(); num = $(this).index() + 1; mainSelector = $("li:nth-child(" + num + ")",main); mainSelector.fadeIn(); $("li",main).not(mainSelector).fadeOut(); }); }); function slider() { $("#thumbnail li img").show(); $("#thumbnail li.on img").hide(); c = $("#thumbnail li.on").index() + 1; c2 = $("#thumbnail li.on").index() + 2; mainSelector = $("#main li:nth-child(" + c + ")"); $(mainSelector).fadeIn(); $("#main li").not($(mainSelector)).fadeOut(); $("#thumbnail li").removeClass("on"); if (c2 == 6) { $("#thumbnail li:nth-child(1)").addClass("on"); }else{ $("#thumbnail li:nth-child(" + c2 + ")").addClass("on"); } timerID = setTimeout('slider()',3000); } 本来ならば作者様に質問する事がよいと思うのですが、 より多くの方からお知恵を拝借したいと考え、この場で質問 させていただきました。 何卒よろしくお願いいたします。

  • jQuery でスライドショーをストップ

    jQueryを使い、トップページを背景となる写真3枚を全画面で フェードイン→フェードアウトという風にループしています。 3枚目の写真でそのまま静止させたいのですが、どのようにしたら3枚目の写真でストップするのでしょうか？ 以下のもののファイルを書き換える必要があると思いますのでソースを記述しました。 fadechanger.js fitter.js HTMLページのソースとfadechanger.js、fitter.js どちらのファイルのソースを書き換えればよいのでしょうか？ 初めてjQueryを使ってみたので全くの初心者です。 どうぞよろしくお願いします。 HTMLページのソース <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/fitter.js"></script> <script src="js/fadechanger.js"></script> <script src="js/imgloader.js"></script> <script src="js/transition.js"></script> <script> $(function() { // オプションの一括指定 var options = { imglist: [ "photo/0.jpg", "photo/1.jpg", "photo/2.jpg", ], width: 1000, height: 1100, minWidth: 600, minHeight: 660, callback: function() { var self = this; // ローディング表示を終了 $("#loading").hide(); // 末尾の要素をフェードイン self.find("img").eq(-1).fadeIn(function() { // フェード切り替え開始 self.fadechanger({ selector: "img" }); }); // fitter起動 self.fitter(options); } } // loader $("#imgContainer").imgloader(options); // transition $("#header a").transition(); }); </script> fadechanger.jsのソース (function($) { /** * fadechanger */ $.fn.fadechanger = function(options) { var self = this, defaults = { speed: 3000, wait: 3000, selector: "" }, config = $.extend({}, defaults, options); self.find(config.selector).show(); (function() { var arg = arguments; self.find(config.selector).eq(-1).delay(config.wait).fadeOut(config.speed, function() { $(this).prependTo($(this).parent()).show(); arg.callee(); }); })(); return this; }; })(jQuery); fitter.jsのソース (function($) { /** * fitter */ $.fn.fitter = function(options) { var self = this, defaults = { width: 1000, height: 1100, minWidth: 600, minHeight: 660, selector: "img" }, config = $.extend({}, defaults, options); // resize $(window).resize(function() { var w = $(window).width(), h = $(window).height(); // 最小サイズ設定 if (w < config.minWidth || h < config.minHeight) { return false; } // IE 6 if ($.browser.msie && $.browser.version < 7) { self.width(w).height(h); } // 画像サイズ変更。後ろはIE用 if (w / h > config.width / config.height) { self.find(config.selector).width(w).height(w * config.height / config.width); } else { self.find(config.selector).height(h).width(h * config.width / config.height); } }).resize(); return this; }; })(jQuery);

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

    ど～もど～も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな？ 私も同じような設計で悩んでてピッタシと思うのがやっとあった！と思ってたら・・・jQueryじゃないみたい（泣） 私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。 ソースを貼っておくのでよろしくお願いします。 ｈｔｍｌファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.frontstyle.com/shopcruise/tokyo_009.html --><HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>test</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><META content=IE=7 http-equiv=X-UA-Compatible><!--css--> <LINK rel=stylesheet type=text/css href="css/style.css"> <LINK rel=stylesheet type=text/css href="css/ie6.css"> <LINK rel=stylesheet type=text/css href="css/backnumber.css"> <LINK rel=stylesheet type=text/css href="css/lightview.css"> <LINK rel=stylesheet type=text/css href="css/shopcruise.css"> <!--js--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery-1.3.2.js"></SCRIPT> <SCRIPT type=text/javascript>　jQuery.noConflict();　</SCRIPT><SCRIPT type=text/javascript src="js/jquery.easing.1.3.js">/SCRIPT> <SCRIPT type=text/javascript src="js/jquery.galleryview-1.1.js"></SCRIPT><SCRIPT type=text/javascript src="js/jquery.timers-1.1.2.js"></SCRIPT><SCRIPT type=text/javascript>　jQuery(document).ready(function(){jQuery('#slide').galleryView({ panel_width: 638,panel_height: 300,frame_width: 80,frame_height: 38,transition_interval: 3000,overlay_height: 0　});});　</SCRIPT> <!--[if lt IE 7]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/swapimage.js"></SCRIPT> <SCRIPT type=text/javascript src="js/prototype.js"></SCRIPT> <SCRIPT type=text/javascript src="js/scriptaculous.js"></SCRIPT> <SCRIPT type=text/javascript src="js/lightview.js"></SCRIPT> <!--//js--></HEAD><BODY><DIV id=slide class=galleryview> <!--スライドショーここからだよ--> <DIV id=gallery_box> <!--メイン画像ここからだよ--> <DIV class=panel><IMG alt="○○○　src="./images/1.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/2.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/3.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/4.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/5.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/6.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./imagess/7.jpg" width=640 height=300> </DIV> <!--メイン画像ここまでだよ--> <!--メイン画像ここまでだよ--><!--サムネイルここからだよ--> <UL class=filmstrip> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_7s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_2s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_3s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_4s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_5s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_6s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_1s.jpg"> </LI></UL><!--サムネイルここまでだよ--> </DIV><!--スライドショーここまでだよ--> </DIV></BODY></HTML> 長くなっちゃってごめんなさい。 困っているので、お願いします。

  • jqueryの用途は？

    jqueryを使って出きる事と言えば画像等のスライドのイメージがあるのですが他にjqueryで実装できる機能はありますか？

  • （JQuery）自動でスライドさせるには・・・。

    JQuery初心者ですが、サンプルをカスタマイズしてナビゲーションを自動で巡回させたいのですが 色々試してみたり調べたのですが全くもってわかりません・・・。 下記ＵＲＬがサンプルで元からある機能は変えずに 操作していない時はナビゲーションと連動して一枚一枚写真が自動でスライドしている 状態にしたいのですが、お分かりになる方ご指導いただければありがたいです・・・！ http://landofcoder.com/demo/jquery/lofslidernews/index5.html

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する