- ベストアンサー
jqueryで
[A] [B] [C1] [C2] [C3] [C4] [C5] 簡易ではありますが上記のような形で詳細は、 ・Cがサムネイル画像 ・Aが拡大画像表示部分(初期状態はC1でC1～C5からクリックで選択) ・Bが現在拡大表示されている画像に対するコメント というようなものを探しております。 自分なりに探してみたのですがコメントも任意の箇所に出力できるものと なるとなかなかみつからず質問させていただきました。 ご存じの方がいらっしゃいましたら教えてください！
- dcx147
- お礼率33% (214/636)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1、#2です。 ＞下記のソースで試しているのですが動作しなくなってしまいました^^; 単純に「{」を忘れているだけの、タイポではないでしょうか？ （最初のhover( )の中の、2番目のfunction{ }の部分） ＞・マウスオーバーまたは選択している状態で半透明 （↑）の修正で、マウスオーバー/アウトについては動作すると思います。 選択状態の設定は、CSSに追加すればよろしいかと。 （スクリプトでやってもいいですけれど…） ＞切り替わる際にフェードイン 画像が表示されている状態ですので、表示されているものにfadeIn( )メソッドを使っても、見た目に変化が無いだけだと想像します。 一旦、消してから表示するとかすればそれっぽく見えるようになると想像します。 hide().fadeIn("slow"); とか でも、この順だと「画像入替え」→「非表示」→「フェードイン」の順になってしまうので、考え方として「非表示」→「画像入替え」→「フェードイン」とするほうがまっとうかも知れません。 上記の場合は実際の表示に差はないと思いますが、例えば、「フェードアウト」→「画像入替え」→「フェードイン」のような処理の場合だと、順序の違いで結果にも差がでますよね？
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 拡大表示されている画像の元画像の要素は変数 t に、コメントの要素は変数 div に取得しています。 ＞サムネイルのマウスカーソルは通常で、選んでいる事が判別できるように ＞borderを赤にし、選ばれていないものはマウスカーソルをポインターにし ＞borderをグレーにしたいと思っております。 こんなかんじでしょうか？ * 選択されている画像用のclassとしてselectedを追加 * 初期状態に、スクリプトでリストの最初のimg要素を表示するように修正 /* CSS追加 */ #thumbnail img { border:1px solid #888; cursor:pointer; } #thumbnail img.selected { border-color:#f00; cursor:default; } /* スクリプト */ window.onload = function(){ set(document.getElementById("thumbnail").getElementsByTagName("img")[0]); } function change(evt){ var t = evt.target || evt.srcElement; if(t.nodeName == "IMG") set(t); } function set(t){ var img, i, div = t.nextSibling; while(div && !/\bcomment\b/.test(div.className)) div = div.nextSibling; img = document.getElementById("thumbnail").getElementsByTagName("img"); for(i=0; i<img.length; i++) img[i].className = img[i].className.replace(/ selected$/, ""); document.getElementById("enlarge_image").src = t.src; t.className += " selected"; document.getElementById("comment").innerHTML = div?div.innerHTML:""; } 前回失念していましたが、jqueryでとのご質問でしたので… <ul id="thumbnail">のonclickをはずして、こんなかんじでしょうか $(function(){ $("#thumbnail li img").click(function(){ $("#thumbnail li img").removeClass("selected"); var t = $(this).addClass("selected"); $("#enlarge_image").attr("src",t.attr("src")); var com = t.nextAll(".comment"); if(com.length) $("#comment").html(com.html()); else $("#comment").html(""); }); $("#thumbnail li img:first").click(); });
補足
お返事ありがとうございます。 おかげ様で動作するようになりました！ 動作の希望があり重ね重ね申し訳ないのですが下記のソースで試して いるのですが動作しなくなってしまいました^^; $(function(){ $("#thumbnail li img").hover(function(){ $(this).fadeTo(200, 0.5); },function() $(this).fadeTo(200, 1); }); $("#thumbnail li img").click(function(){ $("#thumbnail li img").removeClass("selected"); var t = $(this).addClass("selected"); $("#enlarge_image").attr("src",t.attr("src")); $("#enlarge_image").fadeIn(200); var com = t.nextAll(".comment"); if(com.length) $("#comment").html(com.html()); else $("#comment").html(""); }); $("#thumbnail li img:first").click(); }); 希望としては・・・ ■サムネイル画像 ・マウスオーバーまたは選択している状態で半透明 ・マウスアウトまたは未選択の状態で通常表示 ■拡大画像 切り替わる際にフェードイン という事をしたいのですがjqueryのマニュアルをみてもどこが 誤っているのかわかりません・・・
- fujillin
- ベストアンサー率61% (1594/2576)
ごく簡単な仕組みのサンプル。 拡大部分はid指定で取得しているので、表示位置レイアウトは自由に変更可能です。 サムネイルは<ul id=thumbnail>の中であれば数は自由。 <img>と対にあるclass="comment"の内容がコメントとして反映されます。 全体のレイアウトや表示時の効果などいろいろは、適当に修正してください。 （* あっとごめんなさい、jqueryを使ってなかった） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #enlarge div { float:left; } #enlarge img { width:400px; height:240px; } #thumbnail { list-style-type:none; margin:0; padding:0; clear:left; } #thumbnail li { float:left; } #thumbnail img { width:100px; height:60px; } #thumbnail .comment { display:none; } </style> <script type="text/javascript"> <!-- function change(evt){ var div, t = evt.target || evt.srcElement; if(t.nodeName != "IMG") return; div = t.nextSibling; while(div && div.className != "comment") div = div.nextSibling; document.getElementById("enlarge_image").src = t.src; if(div) document.getElementById("comment").innerHTML = div.innerHTML; } //--> </script> </head> <body> <div id="enlarge"> <div><img id="enlarge_image" src="A.jpg" alt=""></div> <div id="comment">comment_A</div> </div> <ul id="thumbnail" onclick="change(event)"> <li> <img src="A.jpg" alt=""> <div class="comment">comment_A</div> </li> <li> <img src="B.jpg" alt=""> <div class="comment">comment_B</div> </li> <li> <img src="C.jpg" alt=""> <div class="comment">comment_C</div> </li> <li> <img src="D.jpg" alt=""> <div class="comment">comment_D</div> </li> </ul> </body> </html>
お礼
お返事ありがとうございます。 やりたい事はなんとか実現する事ができました。 質問なのですが現在拡大表示されている画像を判別しclass名を付加する事は できますでしょうか？ カーソルをpointerで指定すればcssのみで解決できるのですが希望としては Aの画像が拡大表示されていれば(初期状態も含み)、サムネイルのマウスカーソルは 通常で、選んでいる事が判別できるようにborderを赤にし、選ばれていないものは マウスカーソルをポインターにしborderをグレーにしたいと思っております。
お礼
最後までわかりやすい説明をしていただきありがとうございました！ おかげ様で無事に解決です！