jQueryに関するアドバイスを頂きたい
- jQueryに関してアドバイスを求めています。ページ内に複数のスライダーを設置したいが、現状全てのスライダーが連動してしまう問題が発生しています。
- 現在のページでは、サムネイル画像をクリックするとすべてのスライダーのメイン画像が切り替わります。各スライダーのサムネイル画像をクリックしたときに、対応するスライダーのメイン画像のみが切り替わるようにしたいです。
- どなたかjQueryに詳しい方からアドバイスを頂けると助かります。よろしくお願いします。
- ベストアンサー
jQueryに関してアドバイス頂けますでしょうか
はじめまして、gumkucha_maxと申します。 jQueryに関して、どなたかご教授頂けますでしょうか。 ページ内に複数のスライダーを設けたいのですが、 現状、下記ページのような動きになってしまいます。 ▼現状のページ http://ihatovo-cafe.com/tmp/search-2014/index-test20140312.html やりたい事としては、各スライダーのサムネイル画像をクリックすると、 メインの画像が切り替わるという動きにしたいのですが、 現状はサムネイル画像をクリックすると、ページ内にある全てのスライダーのメインが切り替わってしまいます。 どなたかご教授お願い致します。
- gumkucha_max
- お礼率66% (2/3)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
id="MainPhoto"という要素を対象にして処理をしていますが、id="MainPhoto"が複数あるので同じように処理されてしまっているようです。 そもそも同じidが複数あることが文法違反ですけれど。（jQueryではエラーとしてはいないようですが） 解決方法としては、イベント処理の記述を要素の相対的な位置関係を利用して記述するか、または、オブジェクト化しておいて複数設置するかでしょうか。 前者の例として…（全体に簡略化しています） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .changeBox * { padding:0; margin:0; list-style-type:none; } .changeBox{ padding:0 10px; width:30%; float:left; } .changeBox img{ width:100%; } .changeBox .thumBox li{ width:20%; float:left; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".changeBox .thumBox img").click(function(){ $("div.mainImg img", $(this).parents(".changeBox")).attr("src", $(this).attr("src")); }); }); </script> </head> <body> <div id="container"> <div class="changeBox"> <div class="mainImg"><img src="test/image-l-01.jpg" alt=""></div> <ul class="thumBox"> <li><img src="test/image-l-01.jpg" alt=""></li> <li><img src="test/image-l-02.jpg" alt=""></li> <li><img src="test/image-l-03.jpg" alt=""></li> </ul> </div> <div class="changeBox"> <div class="mainImg"><img src="test/image-l-04.jpg" alt=""></div> <ul class="thumBox"> <li><img src="test/image-l-04.jpg" alt=""></li> <li><img src="test/image-l-05.jpg" alt=""></li> <li><img src="test/image-l-06.jpg" alt=""></li> </ul> </div> <div class="changeBox"> <div class="mainImg"><img src="test/image-l-07.jpg" alt=""></div> <ul class="thumBox"> <li><img src="test/image-l-07.jpg" alt=""></li> <li><img src="test/image-l-08.jpg" alt=""></li> <li><img src="test/image-l-09.jpg" alt=""></li> </ul> </div> </div> </body> </html> なお、一旦hide()してからfadeIn()するような場合、hide()した時にレイアウトが変わらないようにしておかないと、画面がちらつきますよ。
その他の回答 (1)
参考URLを、ご覧下さい！ JQueryを使わなくてもできるのでは？・・・ ついでに、レスポンシブレイアウトにされることを、期待しています。
関連するQ&A
- jQueryでクリックした場所に赤枠を付けたいです
度々恐縮ですが、またjQueryに関してお知恵を拝借ください。 下記ページにスライダーを設置していますが、 サムネイル画像をクリックした時と、オンマウスした時に、サムネイル画像に赤枠（CSSのボーダー）を付けたいです。 http://ihatovo-cafe.com/tmp/search-2014/index-test20140312.html サムネイルをクリックした時、サムネイルに赤枠をつけるまでならなんとか出来そうなのですが、 選択中のサムネイルとは別のサムネイルをクリックした時に、 選択中のサムネイルからは赤枠が消え、新しく選択したサムネイルに赤枠をつける・・ という動きに悩んでおります。 どなたかご教授くださいませ。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQueryスライドプラグイン
jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか？ http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。
- 締切済み
- JavaScript
- Jqueryの超初心者です
いつもはコピペで作業しています。 こちらのサイトを参考にサムネイル画像をクリックするとメイン画像が切り替わるページを作成しています。 http://memocarilog.info/jquery/7477 表示されたメイン画像に外部リンクを設定するにはどう記述したら良いでしょうか？ お願いします。
- 締切済み
- JavaScript
- (JQuery）スライダーのサンプル探しています
jquery初心者です・・。 クライアントからの要望がありましたので（http://shop.benesse.ne.jp/ ）のようなjqueryのサンプルをずっと探しているのですがありそうでなかなかありません・・ 画像が入れ替わる時の動きに決まりはありません。 右に各コンテンツのサムネイルが縦に並んでいて左のメインイメージが連動して入れ替わり 画像をクリックするとコンテンツへリンクする。 といった動きです。 どなたかご存知の方教えていただけますでしょうか・・！ 何卒よろしくお願いいたします・・・！
- ベストアンサー
- CSS
- jQueryの読み込みについて
初めまして、制作をしておりまして、 http://card.benrista.com/ 上記のサイトの上にある、sliderのjqueryがありますが、素敵だなと思いまして、 それを私のサイトでも導入したいと思いまして、導入してみました。 (アフィリエイトサイトでは無いですが。。) 【やりたい事・質問】 しかし、スライダーのjqueryは上手く機能するのですが、 上記のサイトを開いた瞬間にスライダーの下の小さいサムネイル部分の gifアニメーションが上手く動きません； http://card.benrista.com/wp-content/themes/benrista/img/index/preloader.gif 上記のURLのサイトのような形でサイトを開いた瞬間に、gifアニメーションを機能させ、 そのあと、小さいサムネイル画像を表示させたいです。 【状況】 状況としては、私のサイトの場合、開くと gifアニメーションが小さいサムネイル画像の下に隠れている状態になってしまいます。 (一応gifアニメーションがサムネイル画像の隙間から少し見える感じです) firebugなどで要素確認などしても、中々難しいです。 【p.s.】 もし、このような質問をする際に最適な掲示板などがあればご教授頂けましたら幸いです。
- 締切済み
- JavaScript
- こんな動きができるJqueryを探しています。
お客さまより、こんな動きができないか？と言われていろいろ探していたんですが、 全然見つからないので、こちらで質問させていただきます。 こちらのサイトの様な動きができるJqueryプラグインはありませんか？ ↓↓↓↓ ---- 摂南大学様サイト http://www.setsunan.ac.jp/ ---- 左右の画像は透明にならなくてもかまいません。（むしろならないほうがいいです） メインの画像が１枚だけ切り替わるスライダーは沢山あるみたいなんですが、 この様に、左右の画像が表示され、なおかつ下のまるい図の色が変わるものが見つからずに、 とても困っています。 どなたか教えていただけませんか？
- ベストアンサー
- JavaScript
- jQuery等で背景をフル表示＋スライドショー
http://www.daichifive.com/ ↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、 サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。 画像は３枚で、３枚目の画像だけ、縦長になっているので、 背景が３枚目になったときだけ縦スクロールバーを付けて、 上から下まで見れるようにしたいです。 サムネイルを出して、次の画像に切り替えるくらいですと、 jQueryを探せば何かあると思うのですが、 ３枚目だけ縦スクロールバーをつけることなどできるのでしょうか。 できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか？ jQuery以外の方法でも、上記のような動きを実装できるやり方があれば ご教授いただけないでしょうか。 よろしくおねがい致します。
- ベストアンサー
- CSS
- ページ横スクロールでjQuery lightBox
横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin （http://leandrovieira.com/projects/jquery/lightbox/） を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。（拡大時の背景のオーバーレイもずれている） これを、サムネイルのあるページ上に表示させるようにしたいのですが、javascriptがよくわからないので、どのように修正したらよいか教えていただけないでしょうか。
- ベストアンサー
- JavaScript
- jQuery slider2のページアイコン
小生、ウェブサイト制作経験はアリながらもJavascriptに関しては全くの素人です。 既成のJavascriptプログラムの中でスライドショー向けのｊQuery slider2をダウンロードし、 ウェブサイトに適応してみました。 概ね思った通りに作動するものの、スライダー部分の右下に表示されページアイコン（class="jquery-slider-page"として作成されている部分？）が、現在表示している部分に相当するアイコンをクリックすると、現在表示している画像を進行方向に流してしまい、背景が表示されるようになっています。 なおかつ、背景が表示された状態でもう一度同じアイコンをクリックすると、消えているはずの現在ページが一瞬表示されるものの、すぐに進行方向へ流してしまうというおかしな動作をします。 もともと期待されていた動作ではないと思うのですが、ダウンロードしてきたものをそのまま使ってこのような動作になってしまっていました。 不得手ながら中身を読み取ってみたところ、現在表示しているページのページアイコンをclass="jquery-slider-page"からclass="jquery-slider-page-current"に書き換えることで、アイコンの表示を変更しているようなので、一時的にclass="jquery-slider-page-current"のクリックを不可にすれば解決するのかなとは思うのですが、何かよい方法はないでしょうか。 使用しているjsは下記のとおりです。 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js jquery.slider.min.js（http://wex.im/javascript/jquery-slider2にて公開されているファイルをダウンロードして使用） また、専用のCSSも特に書き換えなどせずに読み込ませて使用しています。 他にもjs併用はしていますが、紹介サイトでも同様の動作をしていたので、他のjsによる干渉などではない様です。 よろしくお願いします。
- 締切済み
- JavaScript
- jQuery：マウスオーバーで画像が切り替わる
下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ １）メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 （スライドショーはなし） ２）メイン画像にはテキスト（説明文）も入れられる ３）メイン画像の下には、サムネイル画像も表示できる ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 参考になるサイト等、ご存知でしたら教えていただけば幸いです。
- 締切済み
- CSS
お礼
fujillin様 有難うございます！非常に助かりました！！