jQueryのスライドショーについて
- jQueryのスライドショー「Elastic Image Slideshow with Thumbnail Preview」に関して、お分かりになる方がいらっしゃればご教授いただけますでしょうか？
- 現在、スライドを autoplay: true, に設定し、自動で再生（スライド）しています。ただ、スライドバーをクリックすると、自動再生が停止していまいます。
- スライドバーをクリックしても、停止しないコード追加もしくは、削除箇所などをお教えいただけますでしょうか。
- ベストアンサー
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, に設定し、自動で再生（スライド）しています。 ただ、スライドバーをクリックすると、自動再生が停止していまいます。 スライドバーをクリックしても、停止しないコード追加もしくは、削除箇所などをお教えいただけますでしょうか。 よろしくお願い致します。
- happy_sunny7
- お礼率75% (3/4)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
http://stackoverflow.com/questions/12562118/elastic-image-slideshow-autoplay-resume-after-thumbnail-clicked によれば _self.options.autoplay = false; の後に setTimeout( function() { _self.options.autoplay = true; _self._startSlideshow(); }, 5000); //restart autoplay after 5 seconds を追加すれば5秒後に再スタートするようです。 5秒後が嫌なら追加したコードの5000を変更してください。ミリセカンドです。
関連するQ&A
- jQueryで簡易なスライドショーを作ったのですが
jQueryの練習に簡易なスライドショーを作ったのですが、画像を変えるごとに画面の一番上まで戻ってしまいます。以下にコードを載せますので、どなたかご教示いただければ幸いです。 $(function(){ var num = 0; $(".slideshow").click(function(){ $(this).fadeOut("500",function(){ var ptnum = (++num)%5 + 1; //5枚の画像をクリックで変える var ptname = "photos/pt_00" + ptnum + ".jpg"; $(this).attr("src",ptname); $(this).fadeIn("500"); }); }); }) HTMLの方は何の変哲もない <img src="photos/pt_001.jpg" class="slideshow" /> となっています。
- ベストアンサー
- JavaScript
- 【jquery】自動再生するスライドショー
jquery プラグインで、 ○自動再生するスライドショーで、 ○画像に対して、hover イベントで再生を一時停止できる ○左右の方向ボタン（「<」「 >」 ）で再生方向をコントロールできる ものを探してます。 自動再生の動きは、 http://logicbox.net/jquery/simplyscroll/ がベストなんですが、このプラグインは、自動再生モードでは、 方向をコントロールするボタンを表示できないのです。 上記の条件に合致するものを、誰かご存知ないでしょうか？ あるいは、上記のプラグインで、自動再生しながら、左右の方向ボタンを表示し、 ボタンをクリック、もしくは hover することで、方向を反転させられるように するにはどうすればいいでしょうか。 詳しい方、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- JQueryでサムネ付スライドショークロスフェード
JQueryでクリックを使用せず、自動クロスフェードのサムネイル付きスライドショー&マウスオーバーでもクロスフェードで切り替わるようにするためにはどうすればよいでしょうか？ 更にはスライドショーにキャプションがつけられたら最高です。 スライドショーの幅はwidth: 354px; height: 280px;、サムネイルはその下に縦3つ、横3つの計9つ配置します。 スライドショーは自動フォロスフェードによるループ、またサムネイルをマウスオーバーでもその画像にクロスフェードイン、その際スライドショー内に表示されている&マウスオーバーされているサムネイルの画像は罫で仕切るか、半透明がクリアに表示されるといった処理を考えております。 恥ずかしながら調べても分からなかったので、皆さまの知識を拝借したく投稿させて頂きました。 恐れ入りますが、何卒ご助言下さいますよう、よろしくお願い致します。
- 締切済み
- JavaScript
- jQueryスライドプラグイン
jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか？ http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。
- 締切済み
- JavaScript
- 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); } 本来ならば作者様に質問する事がよいと思うのですが、 より多くの方からお知恵を拝借したいと考え、この場で質問 させていただきました。 何卒よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryのスライドショーのカスタマイズについて
仕事であるサイトを作っているのですが、製品ページの所で製品画像をスライドショーにして実装しようと思っており、jQueryで理想に近いプラグイン(galleriaというものです)を発見したのですが、スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ自分でカスタマイズしようとやってみましたがうまくできません。 皆様のお力をお貸しいただけないでしょうか。 ■galleriaのプラグインを使ってカスタマイズする内容 galleriaのサイトからファイルをダウンロードし(http://galleria.aino.se/download/)メイン画像(サムネイルの上にある画像)内、もしくは外に「拡大画像」というボタンを設置し、クリックするとモーダルウィンドウで拡大画像が表示されるようにしたい。 ■自分でうまくできないところ このプラグインはサムネイル、もしくは左右にある矢印をクリックすると画像が変わる仕様になっており、「拡大画像」ボタンに今表示されているメイン画像を判別させて拡大画像を表示させる処理が必要となると思うのですが、うまくいきません。 モーダルウィンドウはthick.box(http://jquery.com/demo/thickbox/)を使って表示させています。 その他に、もっと簡単にできる方法など教えていただければ助かります。 よろしくお願いいたします。
- 締切済み
- JavaScript
- jquery(js)にて実装したいスライドショー
jquery(js)にて実装したいスライドショー機能があります。 参考サイト http://j-sen.jp/kanto/city_411_1.htm サムネイル画像下の "他の写真を見る"の左右の矢印をクリックでサムネイルが 切り替わる機能です。 写真のＵＲＬはシステムにより吐き出すため, 枚数は決め打ちではないので、配列に画像URLを入れていくとは思うのですが、 うまくソースがかけません。 地頭のある方、何卒力添え宜しくお願いいたします。
- ベストアンサー
- JavaScript
- メイン画像とサムネイル画像のスライドショー
サムネイル付きのスライドショーのJavaScriptを探しているのですが、サムネイル画像がメイン画像の上にくるスライドショーはありますか？ イメージを添付します。 http://black-flag.net/jquery/20111122-3597.html 上記のサイトとかでcssを使用してみたのですが、メイン画像の下にサムネイル画像がきてしまいます。 サムネイル画像をメインの画像の上にもっていくことはもしかしてできないのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- スライドショーを自動ループにしたい
サムネイルつきのスライドショーを作りたいと思っています。 本当はページを開けたら自動的にスライドショーがはじまるのが理想なのですが、ボタンを押してスライドショー開始でもよく、サムネイルの画像をクリックすると、またそこからはじまるようにしたいです。 参考にしているHPが http://himajin.moo.jp/freejava/imgchange/imgview3.html なのですが、チェックボックスを入れたくありません。自動でエンドレスループしてほしいです。 どうやってはずしたらいいのでしょうか？ 色々試してみましたが、動かなくなってしまいます。 それとボタンを<input type="button">になってるのをjpg画像のボタンにしたかったのですが、これも変えるのがうまくいきません。 ボタンを変えることは可能でしょうか？ おしえてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jsのスライドショーのボタンの時間制御について
jsのスライドショーについて質問です。 メイン画像とサムネール画像が連動していて、５秒間で次の画像及びサムネールに自動的にスライドするというものを作りました。そして、Prevボタンやnextボタンをつけ、クリックと、手動で次のスライドに移るようにしました。 これに、切り替わったスライドから５秒間止まり次の画像に切り替わるという設定を加えたいのですが、うまくいきません。自動再生中の４秒後にボタンをクリックすると、次のスライドが１秒で、また次のスライドに切り替わってしまうのです。 どうか方法を教えてください。 ＜スクリプト＞ //自動再生 var timerID = setInterval(function(){ $('#thumbsNext').click(); },5000); $('#gallery ul').hover(function(){ clearInterval(timerID); }, function(){ timerID = setInterval(show, 5000); // マウスアウト時にスライドショーを再開 }); function show(){ $('#thumbsInner').animate({ marginLeft:parseInt($('#thumbsInner').css('margin-left'))-248+'px' },'slow','swing', function(){ $('#thumbsInner').css('margin-left','-248px'); $('#thumbsInner ul li:first').appendTo('#thumbsInner ul'); $('#thumbsList .active').next().click(); }); }
- 締切済み
- JavaScript
お礼
ありがとうございます！ ご指摘の通りコマンド追加で、スライドの再スタートができました！ ありがとうございました。