javascriptのfunction実行優先度（画像拡大機能）

こんにちは。
javascript初心者です。
運営中のサイトで要望があり、機能を追加することになりましたが、
動作が安定しないため、質問させていただきます。

現在運営しているECサイトの商品画像を、
マウスオーバーで拡大したいとの要望です。

現在の状態は、
メインの画像と、サムネイル（サブの画像）×n枚
という感じになっていて、
サムネイルにマウスオーバーすると、
メイン画像のゾーンの画像が切り替わるという状態になっています。

まずはサムネイルをマウスオーバーで切り替えるところを、
クリックで切り替え、
メイン画像にマウスオーバーで拡大機能を追加するというやり方にしようと思いました。

拡大するためのjsは、
・SergeLand Image Zoomer
を使うことにいたしました。

書いたものがこちらです。

こちらのサイトは、商品画像を商品のIDから引用しているため、
通常であれば◯◯.jpeg等で画像を指定できるところを、
パスが固定ではないため、上記のような書き方になりました。
（おそらく間違っている部分も多いかと思いますが。）

上記の書き方の問題点としては、
・画像が切り替わらない
・ズーム機能は動作するが、サムネイルを切り替えてもズームウインドウ内に表示されない

です。
もしかしたらjavascriptの実行に優先度等があり、
順序がおかしく動作しないのかと予想しております...

詳しい方いらっしゃいましたら力お貸しいただけると幸いです。
どうぞよろしくお願いいたします。

追記

サムネイルも、大きな画像も、同じ画像を使っています。
@(imgPath)?@ViewBag.RCC というのが画像のパスで、
800x800の画像をサムネイルでは縮小表示、
メイン画像でも少しだけ縮小して表示しているものを
スコープ内では800x800のまま表示したいと思っています。

スコープ内の画像は@(imgPath)?@ViewBag.RCCを
そのまま入れれば800x800で表示されることはわかっています。

追記2
js部分を

に書き換えることで、サムネイルをクリックして
メイン画像が変わるようになりました。
ズーム機能も動作しておりますが、
1枚目メイン画像のみしかズームされません。
画像切り替え後マウスオーバーしても、
1枚目のメイン画像がズームされてしまいます。

orange0190

2015/07/21 02:06

載せているコードはそのままコピーしたものですか? "click"のあとに「,」がないため、エラーになると思いますが・・・

行動規範の内容に同意します

回答2件

ベストアンサー

質問欄に書かれたスクリプト部分をインデントをつけて書き出してみました。

javascript
1<script type="text/javascript" defer> 
2  $(function(){  
3    $('.thmbnail').bind(
4      "click,"
5      function(){
6        $("#product_large_image").attr('src', $(this).attr('src')); 
7        $("#product_large_image").imagezoomsl({ zoomrange: [1, 10] }); 
8      }, 
9      function(){
10        $("#product_large_image").attr('src', $("#product_large_image").attr('data-image-source'));  
11      }
12    );  
13  }); 
14</script>

変な部分ですが

"click,"

"click", にしないとシンタックスエラーが出るように思います。
ズームは動いたとありますが、質問作成時のコード記述ミスでしょうか？

bind(type,fnc(),fnc())

bindのシンタックスはbind(type, [data], fn)こうですが、コードではbind(type,関数,関数)です。
クリック時には後半の関数のみが動いているようです。
fncを1つにまとめてbind("click",fnc());とすれば期待通り動作するかも知れません。

data-largeやproduct_large_imageは変更されていない。

変更しないとこの部分には古い画像のコードが残りそうですが大丈夫ですか？
※＠関数ってIE専用でしたっけ？あまり詳しくないので

確認用のコードを追記します。

HTML
1<html>
2<head>
3  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
4  <script src="http://zoomsl.sergeland.ru/js/zoomsl-3.0.min.js"></script>
5</head>
6
7<body>
8  <div class="detail_wrapper_left"> 
9    <div id="product_img"> 
10      <img id="product_large_image" class="large" src="l.png" data-image-source="l.png" alt="" data-large="l.png" title=""/> 
11    </div>
12  <div>
13    <img class="thmbnail" src="s.png" alt="" /> 
14  </div> 
15
16  <script type="text/javascript" defer> 
17    $(function(){  
18      $('.thmbnail').bind(
19        "click",
20        function(){
21          $("#product_large_image").attr('src', $(this).attr('src')); 
22          $("#product_large_image").imagezoomsl({ zoomrange: [1, 10] }); 
23        }
24      );  
25    }); 
26  </script> 
27</body>

投稿2015/07/21 07:29

編集2015/07/21 10:46

hirohiro

総合スコア2068

J4CK1E

2015/07/21 08:02

回答ありがとうございます。 >2. bind(type,fnc(),fnc()) bindのシンタックスはbind(type, [data], fn)こうですが、コードではbind(type,関数,関数)です。クリック時には後半の関数のみが動いているようです。 fncを1つにまとめてbind("click",fnc());とすれば期待通り動作するかも知れません。こちら試してみましたが、ズーム機能も、画像の切り替えもできなくなってしまいました。 .bind("click," 部分に関してはもともと、 .hover( で、これで動作しました。ズーム機能もこれでないと動かないようです...

hirohiro

2015/07/21 10:52

> >bind("click",fnc());とすれば > こちら試してみましたがどのように試されたでしょうか？確認用のコードを末尾に追記しました。このコードをHTMLとして保存して、同階層に適当な画像のl.pngとs.pngを配置すれば、HTMLをブラウザで開いて確認できます。 img class="thmbnail" の画像をクリックすると img id="product_large_image"　の画像がs.pngに変って img id="product_large_image"　にマウスオーバーすると、l.pngがスコープ表示されます。望まれている動作とは微妙に違う気がしますが、差し替える画像の指定が変なだけなので、そこは修正すればいいとして本番に同じように書いてもサンプルのような動作さえしないなら、@関数で指定している部分が実値になっていなくてJSで差し替えできないのかも知れないですね。

J4CK1E

2015/07/22 03:18

すみません、質問に追記いたしましたが、大きい画像と小さい画像は用意していません。全て@(imgPath)?@ViewBag.RCCで指定しています。少し論点がずれてしまいますが、 l.png、s.pngのように、二つの画像を用意することはできません。

hirohiro

2015/07/22 03:46 編集

あ、いえ添付した確認コードは、動的云々の部分が無ければ画像の切り替えやズームは動作するのか？という原因の切り分けのためだったのですが。では、確認用コードの下のほうの<script>から</script>部分で jackie1993427さんが添付されたコードの下のほうの<script>から</script>を置換しても「画像の入れ替え｣部分さえも動作しないでしょうか？・画像が切り替わらない　これは質問欄に添付されているコードの　$("#product_large_image").attr('src', $("#product_large_image").attr('data-image-source')); 　この部分のせいではないかと思っています。　(切り替え前の画像をサムネイルに代入してるので) 　確認用コードではこの部分を省いています。・ズーム機能は動作するが、サムネイルを切り替えてもズームウインドウ内に表示されない　こちらはサムネイルの差し替えしか行っていないからだと思います。　$("#product_large_image").attr('src', $(this).attr('src')); 　確認用のこのコードの下に以下を挿入すれば　$("#product_large_image").attr('data-large', $(this).attr('src')); 　ズーム画像も変わるのではないかと思います。いかがでしょうか？

J4CK1E

2015/07/22 05:04

ありがとうございます！画像の入れ替え、メイン画像の切り替え共々うまく動作するようになりました。初心者で質問もわかりづらかったかと思いますが、丁寧に教えていただき長きにわたる問題が解決いたしました。ありがとうございます。

J4CK1E

2015/07/22 05:09

すみません、問題があることを忘れていました。ページを読み込んだ際、メインの画像にマウスオーバーしてもズーム機能が実行されない問題です... サムネイルをクリック、切り替えをすると実行されるのですが、これは記述の順序の問題でしょうか... すみませんが、この件もお教えいただけると幸いです。

hirohiro

2015/07/22 06:01 編集

>>ページを読み込んだ際、メインの画像にマウスオーバーしてもズーム機能が実行されない問題です... 今作成しているスクリプトは、画像をクリックすると、メインを差し替えると同時に、「ズーム機能をメインに付ける」というものです。画像をクリックするまではメインにはズーム機能が添付されていません。 ※逆に何度もクリックしてメインの画像を入れ替えているなら、クリックするたびにズーム機能がメインに追加されて問題が生じている可能性も… $("#product_large_image").imagezoomsl({ zoomrange: [1, 10] }); これを消して、「$(function(){ 」の上の行に以下を追記するといいかも知れません。 S(document).ready(){ $("#product_large_image").imagezoomsl({ zoomrange: [1, 10] }); } クリックの度にズーム機能を付加するのはやめて、HTML読み込み完了時に1回だけ行うように変えています。

J4CK1E

2015/07/22 06:15

functionの上に追記すると、 <script type="text/javascript" defer> $(function(){ $('.thmbnail').bind( "click", S(document).ready(){ $("#product_large_image").imagezoomsl({ zoomrange: [1, 10] }); } function(){ $("#product_large_image").attr('src', $(this).attr('src')); $("#product_large_image").attr('data-large', $(this).attr('src')); } ); }); </script> ということであってますか...？何も動作しなくなってしまうのですが... 頼りっぱなしで申し訳ありません。

hirohiro

2015/07/22 06:28 編集

こうです。が、何をどういう構造で実装しようとしているか理解して反映しないと、自分でメンテナンスできませんし、後々苦しむことになるかも知れませんよ。私の方では要求仕様を完全に理解しているわけでもありませんし、質問に回答を付けているだけなので全体として正しい方向を向いているかも分かりません。下手すると違うゴールに向かって進んでいるかもしれませんので……注意してくださいね <script type="text/javascript"> //HTMLを全て読み込み終わった時に1回だけ実行 $(document).ready(){ $("#product_large_image").imagezoomsl({ zoomrange: [1, 10] }); } //クリックイベントをトリガーにメインの画像を差し替えるメソッドを追加 $(function(){ $('.thmbnail').bind( "click", function(){ $("#product_large_image").attr('src', $(this).attr('src')); $("#product_large_image").attr('data-large', $(this).attr('src')); }); }); </script>

J4CK1E

2015/07/22 06:39

そうですね、自分で学習しつつ進める部分だとは思っているのですが... 入社してまだ間もないグラフィックデザイナーなのですが...突然上司に頼まれてしまったもので時間もなく頼らせてもらってしまっています。こちらの記述だと読み込み直後にズーム機能を実行するよう指定しているのかと思うのですが、サムネイルの切り替えも、ズームの機能も動作しなくなってしまいます。質問のところで提示しているURLの飛び先の設置方法も参考にし、下記のような記述にしてみたところ無事動作いたしました。 <script type="text/javascript" defer> jQuery(function(){ $("#product_large_image").imagezoomsl({ zoomrange: [1, 10] }); $('.thmbnail').bind( "click", function(){ $("#product_large_image").attr('src', $(this).attr('src')); $("#product_large_image").attr('data-large', $(this).attr('src')); } ); }); </script> 数々の回答ありがとうございました。今回この問題を解決したことにより、多少時間ができますので、もっとJavascriptの基礎から勉強していきたいと思います。ありがとうございます。

hirohiro

2015/07/22 06:48 編集

あら、添付したコードは駄目でしたか、すみません。最終的に動作するコードが出きたようでよかったです。そういう事情でしたら目の前の課題を解決するのが優先ですし、ある程度仕方ないですね。大変でしょうががんばってください。

行動規範の内容に同意します

クリックするたびにメイン画像のsrcを入れ替えて、拡大機能を設定しようとされているようですが、
あらかじめメインの画像もHTML上に全て書いて、それに拡大機能を設定しておいて、
サムネイルをクリックしたときに表示するメイン画像を切り替えるだけにするほうがシンプルで分かりやすいと思います。
以下サンプルです。参考にどうぞ。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title></title>
6<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
7<script src="http://zoomsl.sergeland.ru/js/zoomsl-3.0.min.js"></script>
8<script>
9$(function(){
10	//要素の取得
11	var $large = $(".large");
12	var $thmbnail = $(".thmbnail");
13	
14	//全てのメイン画像にimagezoomslを実行し最初の画像以外を非表示にする
15	$large.imagezoomsl({
16		zoomrange: [1, 10]
17	}).hide().eq(0).show();
18	
19	$thmbnail.bind("click",
20		function(e){
21			//クリックしたサムネイルと同じ順番のメイン画像を表示してそれ以外は非表示にする
22			$large.eq($thmbnail.index($(this))).show().siblings().hide();
23		}
24	); 
25});
26</script> 
27</head>
28<body>
29	<div>
30		<img class="large" src="http://zoomsl.sergeland.ru/images/fashion-056.jpg" alt="" width="247" />
31		<img class="large" src="http://zoomsl.sergeland.ru/images/fashion-054.jpg" alt="" width="247" />
32		<img class="large" src="http://zoomsl.sergeland.ru/images/fashion-033.jpg" alt="" width="247" />
33		<img class="large" src="http://zoomsl.sergeland.ru/images/fashion-072.jpg" alt="" width="247" />
34	</div>
35	<div>
36		<img class="thmbnail" src="http://zoomsl.sergeland.ru/images/fashion-056.jpg" alt="" width="58" />
37		<img class="thmbnail" src="http://zoomsl.sergeland.ru/images/fashion-054.jpg" alt="" width="58" />
38		<img class="thmbnail" src="http://zoomsl.sergeland.ru/images/fashion-033.jpg" alt="" width="58" />
39		<img class="thmbnail" src="http://zoomsl.sergeland.ru/images/fashion-072.jpg" alt="" width="58" />
40	</div>
41</body>
42</html>

投稿2015/07/21 06:24

編集2015/07/22 03:53

ina

総合スコア127

J4CK1E

2015/07/21 06:36

回答ありがとうございます。本来であればそのように画像を一枚一枚指定したいのですが、画像のパスが自動的に生成されるため、その使い方が厳しく... @if(descriptionImages.Count() > 0) { foreach(var descImage in descriptionImages) { string imgPath = string.IsNullOrEmpty(descImage.FilePath)? "product/item/images/"+ descImage.ProductId +"/Description/"+ descImage.ViewOrder: descImage.FilePath; imgPath = GenLinkUri(imgPath, "~/"); <img class="thmbnail" src="@(imgPath)?@ViewBag.RCC" alt="" /> }} このあたりが画像のパスを生成しているかと思います。すみません、補足等ありましたら追記いただけると幸いです。よろしくお願いいたします。

ina

2015/07/21 06:48

サムネイルでされているのと同様にメイン画像もループを使って複数のimg要素として出力できないのでしょうか？

J4CK1E

2015/07/22 03:20

すみません、初心者なものでその意味がよく理解できません... 申し訳ありません。具体例を提示していただけるとありがたく思います。

ina

2015/07/22 03:58

サムネイル部分の記述が正しいことが前提ですが、メイン画像の部分を以下のようにすればできるんじゃないでしょうか。 ■修正前 <img id="product_large_image" class="large" src="@(imageUrl)?@ViewBag.RCC" data-image-source="@imageUrl" alt="" data-large="@(imageUrl)?@ViewBag.RCC" title=""/> ■修正後 @if(descriptionImages.Count() > 0) { foreach(var descImage in descriptionImages) { string imgPath = string.IsNullOrEmpty(descImage.FilePath)? "product/item/images/"+ descImage.ProductId +"/Description/"+ descImage.ViewOrder: descImage.FilePath; imgPath = GenLinkUri(imgPath, "~/"); <img class="large" src="@(imgPath)?@ViewBag.RCC" alt="" title=""/> }} あと、全て同じサイズの画像を使われるとのことなので、サンプルコードを修正しました。

行動規範の内容に同意します

あなたの回答