詳しいScriptコードは
$(function(){ $("img.ChangePhoto1").click(function(){ var ImgSrc = $(this).attr("src"); var ImgAlt = $(this).attr("alt"); $("img#MainPhoto1").attr({src:ImgSrc,alt:ImgAlt}); $("img#MainPhoto1").hide(); $("img#MainPhoto1").fadeIn("slow"); return false; });});</script>
です。
呼び出し周辺のタグは
<div class="code_thum"><a href="#"><img src="images/*****.png" width="75" class="ChangePhoto2">・・・です
うまく動作しません
スクリプトエラーが出るのかしら?
目的と違う動作になるのかしら?
変化がみられないのかしら?
うまくだけじゃ意味が伝わらないわ。
困ったときはアラートで目的の値を取得できてるか確認してみたりして1ステップずつ行を増やしていくといいわ。
$(function(){ $("img.ChangePhoto1").click(function(){ var ImgSrc = $(this).attr("src"); alert(ImgSrc); }); });
$("img#MainPhoto1").attr({src:ImgSrc,alt:ImgAlt});
mapのvalueに変数って使えたかしら?
2つに分けて様子をみて。
$("img#MainPhoto1").attr("src",ImgSrc); $("img#MainPhoto1").attr("alt",ImgAlt);
▽2
●
a-kuma3 ●500ポイント ベストアンサー |
サムネイルの画像をクリックしたら、大きく表示したい、みたいなことをやりたいんですよね。
質問の補足に書いてあるコード、基本的に動きますよ。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- jquery-smooth-scroll は、は使ってないけど、一応... --> <script src="https://raw.githubusercontent.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js"></script> <script> /* 質問の補足に書いてあったコードに、改行を入れた以外は、そのまんまです */ $(function(){ $("img.ChangePhoto1").click(function(){ var ImgSrc = $(this).attr("src"); var ImgAlt = $(this).attr("alt"); $("img#MainPhoto1").attr({src:ImgSrc,alt:ImgAlt}); $("img#MainPhoto1").hide(); $("img#MainPhoto1").fadeIn("slow"); return false; }); }); </script> <style> #MainPhoto1 { height: 300px; margin-bottom: 3px; } IMG.ChangePhoto1 { cursor: pointer; } </style> <!-- 画像を切り替えて、表示するところ --> <img src="" id="MainPhoto1"> <!-- サムネイル画像 --> <div> <img src="http://cdn1.www.st-hatena.com/users/a-/a-kuma3/user.jpg?1377560470" width="75" class="ChangePhoto1"> <img src="http://f.st-hatena.com/images/fotolife/a/a-kuma3/20140222/20140222183826.jpg" width="75" class="ChangePhoto1"> <img src="http://f.st-hatena.com/images/fotolife/a/a-kuma3/20140412/20140412171756.jpg" width="75" class="ChangePhoto1"> <img src="http://f.st-hatena.com/images/fotolife/a/a-kuma3/20140330/20140330123543.jpg" width="75" class="ChangePhoto1"> </div>
上記のコードを、jsFiddle で試したのがこちらです。期待した動きをしてるんじゃないでしょうか。
http://jsfiddle.net/a_kuma3/YEx4F/1/
思った通りに、動かない原因は、今見ている画像をクリックするところとは、別のところにあります。
だから、何時間も奮闘しても分からないんじゃないか、と思います。
<script> ★問題がありそうなのは、こことか★ $(function(){ ★こことか、なんじゃないかと★ $("img.ChangePhoto1").click(function(){ var ImgSrc = $(this).attr("src"); var ImgAlt = $(this).attr("alt"); $("img#MainPhoto1").attr({src:ImgSrc,alt:ImgAlt}); $("img#MainPhoto1").hide(); $("img#MainPhoto1").fadeIn("slow"); return false; }); }); </script>
上で「★」を付けたあたりでエラーが起きて、処理が中断されている。
だから、クリックしたときの処理を登録するところまでたどり着いていない。
後、無いとは思いますが、念のためにチェックしておいた方が良いのは、この部分。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
ぼくが書いた例では Google がホストしているスクリプトに向けてますけど、どこにあっても同じで、
といったあたりは、確認しておいた方が良いかな、と思います。
基本的なことで恐縮ですが、確認だけ。
ソースに「img#MainPhoto1」とありますがimg要素のid属性に"MainPhoto1"を設定してますか?