teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問jQuery Zoom で同じ動きを複数画像対応にしたい

編集履歴

質問編集履歴

8

文章修正しました

2018/05/01 10:37

投稿

salamKAR
salamKAR

スコア11

test CHANGED
File without changes
test CHANGED
@@ -8,13 +8,11 @@
8
8
 
9
9
 
10
10
 
11
- [リンク内容](http://office-goto.info/javascript-jquery/zoom-plugin/)
11
+ [ソース](http://office-goto.info/javascript-jquery/zoom-plugin/)
12
12
 
13
13
 
14
14
 
15
- 【デモ】
16
-
17
- [リンク内容](http://office-goto.info/demo/zoom/)
15
+ [デモ](http://office-goto.info/demo/zoom/)
18
16
 
19
17
 
20
18
 
@@ -26,17 +24,17 @@
26
24
 
27
25
 
28
26
 
29
- そもそもこのJqueryが同動きの複数画像には対応してないのでしょうか。
30
-
31
-
32
-
33
27
  ページ内に何百枚も画像があり、それ全てにこの動きを対応させたいのですが、
34
28
 
35
29
  素人のため、複雑な事がわかりません。
36
30
 
37
- #ex1の動きのみを全ての画像に対応させたいのです。
31
+ ex1の動きのみを全ての画像に対応させたいのです。
38
32
 
39
33
 
34
+
35
+ そもそもこのJqueryが同動きの複数画像には対応してないのでしょうか。
36
+
37
+ jqueryの方を直さないと動かないものであれば、大人しく設置は諦めます。
40
38
 
41
39
 
42
40
 

7

見やすく修正

2018/05/01 10:37

投稿

salamKAR
salamKAR

スコア11

test CHANGED
File without changes
test CHANGED
@@ -4,13 +4,17 @@
4
4
 
5
5
  Jqueryのプラグインで下記のjQuery Zoomというのを利用して画像を拡大しようとしています。
6
6
 
7
- プラグイン自体は上手く設置できて動くのですが、複数画像に対応する方法がわかりません。
7
+ プラグイン自体は設置できてデモの通りの場合は動くのですが、同じページ内で、同じ動きを複数画像に対応する方法がわかりません。
8
-
9
- 同じ動きを複数画像に対応するにはどこを直せば良いのでしょうか。
10
8
 
11
9
 
12
10
 
13
- http://office-goto.info/javascript-jquery/zoom-plugin/
11
+ [リンク内容](http://office-goto.info/javascript-jquery/zoom-plugin/)
12
+
13
+
14
+
15
+ 【デモ】
16
+
17
+ [リンク内容](http://office-goto.info/demo/zoom/)
14
18
 
15
19
 
16
20
 
@@ -30,8 +34,6 @@
30
34
 
31
35
  素人のため、複雑な事がわかりません。
32
36
 
33
-
34
-
35
37
  #ex1の動きのみを全ての画像に対応させたいのです。
36
38
 
37
39
 
@@ -44,7 +46,7 @@
44
46
 
45
47
 
46
48
 
47
- ```script
49
+ ```javascript
48
50
 
49
51
  $(document).ready(function(){
50
52
 
@@ -80,7 +82,7 @@
80
82
 
81
83
 
82
84
 
83
- ```ここに言語を入力
85
+ ```html
84
86
 
85
87
  <span class="zoom" id="ex1">
86
88
 

6

部分修正

2018/05/01 10:31

投稿

salamKAR
salamKAR

スコア11

test CHANGED
File without changes
test CHANGED
@@ -40,11 +40,11 @@
40
40
 
41
41
  ### 該当のソースコード
42
42
 
43
- script
44
43
 
45
44
 
46
45
 
46
+
47
- ```ここに言語を入力
47
+ ```script
48
48
 
49
49
  $(document).ready(function(){
50
50
 
@@ -62,9 +62,9 @@
62
62
 
63
63
 
64
64
 
65
- html
66
65
 
66
+
67
- ```ここに言語を入力
67
+ ```html
68
68
 
69
69
  <span class="zoom" id="ex1">
70
70
 

5

＜CODE>つけました

2018/05/01 10:27

投稿

salamKAR
salamKAR

スコア11

test CHANGED
File without changes
test CHANGED
@@ -36,12 +36,6 @@
36
36
 
37
37
 
38
38
 
39
- ```
40
-
41
- エラーメッセージ
42
-
43
- ```
44
-
45
39
 
46
40
 
47
41
  ### 該当のソースコード
@@ -49,6 +43,8 @@
49
43
  script
50
44
 
51
45
 
46
+
47
+ ```ここに言語を入力
52
48
 
53
49
  $(document).ready(function(){
54
50
 
@@ -62,9 +58,13 @@
62
58
 
63
59
  });
64
60
 
61
+ ```
62
+
65
63
 
66
64
 
67
65
  html
66
+
67
+ ```ここに言語を入力
68
68
 
69
69
  <span class="zoom" id="ex1">
70
70
 
@@ -72,11 +72,15 @@
72
72
 
73
73
  </span>
74
74
 
75
+ ```
76
+
75
77
 
76
78
 
77
79
  ### 試したこと
78
80
 
79
81
 
82
+
83
+ ```ここに言語を入力
80
84
 
81
85
  <span class="zoom" id="ex1">
82
86
 
@@ -90,6 +94,8 @@
90
94
 
91
95
  </span>
92
96
 
97
+ ```
98
+
93
99
 
94
100
 
95
101
  ### 補足情報（FW/ツールのバージョンなど）

4

初心者アイコンをつけました

2018/05/01 10:25

投稿

salamKAR
salamKAR

スコア11

test CHANGED
File without changes
test CHANGED
File without changes

3

質問内容を追記しました

2018/05/01 10:22

投稿

salamKAR
salamKAR

スコア11

test CHANGED
File without changes
test CHANGED
@@ -23,6 +23,16 @@
23
23
 
24
24
 
25
25
  そもそもこのJqueryが同動きの複数画像には対応してないのでしょうか。
26
+
27
+
28
+
29
+ ページ内に何百枚も画像があり、それ全てにこの動きを対応させたいのですが、
30
+
31
+ 素人のため、複雑な事がわかりません。
32
+
33
+
34
+
35
+ #ex1の動きのみを全ての画像に対応させたいのです。
26
36
 
27
37
 
28
38
 

2

追記

2018/05/01 10:16

投稿

salamKAR
salamKAR

スコア11

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  プラグイン自体は上手く設置できて動くのですが、複数画像に対応する方法がわかりません。
8
8
 
9
- 同じ動きを複数画像に対応するにはどこをいじれば良いのでしょうか。
9
+ 同じ動きを複数画像に対応するにはどこを直せば良いのでしょうか。
10
10
 
11
11
 
12
12
 
@@ -22,6 +22,10 @@
22
22
 
23
23
 
24
24
 
25
+ そもそもこのJqueryが同動きの複数画像には対応してないのでしょうか。
26
+
27
+
28
+
25
29
  ```
26
30
 
27
31
  エラーメッセージ
@@ -32,13 +36,31 @@
32
36
 
33
37
  ### 該当のソースコード
34
38
 
39
+ script
35
40
 
36
41
 
37
- ```ここに言語名を入力
38
42
 
39
- ソースコード
43
+ $(document).ready(function(){
40
44
 
45
+ $('#ex1').zoom();
46
+
47
+ $('#ex2').zoom({ on:'grab' });
48
+
49
+ $('#ex3').zoom({ on:'click' });
50
+
51
+ $('#ex4').zoom({ on:'toggle' });
52
+
41
- ```
53
+ });
54
+
55
+
56
+
57
+ html
58
+
59
+ <span class="zoom" id="ex1">
60
+
61
+ <img src="img/daisy.jpg" width="555" height="320">
62
+
63
+ </span>
42
64
 
43
65
 
44
66
 
@@ -52,9 +74,11 @@
52
74
 
53
75
  </span>
54
76
 
77
+ <span class="zoom" id="ex1">
55
78
 
79
+ <img src="img/daisy.jpg" width="555" height="320">
56
80
 
57
- を２回書いても、先頭の分しか動かない
81
+ </span>
58
82
 
59
83
 
60
84
 

1

わからない部分を追記しました。

2018/05/01 09:51

投稿

salamKAR
salamKAR

スコア11

test CHANGED
File without changes
test CHANGED
@@ -11,6 +11,14 @@
11
11
 
12
12
 
13
13
  http://office-goto.info/javascript-jquery/zoom-plugin/
14
+
15
+
16
+
17
+ 例えば１枚目の犬のマウスオーバーの動きを、
18
+
19
+ ページ内全ての画像に対応させたいが、
20
+
21
+ 今のソースのまま、html内で<span class="zoom" id="ex1">を並べても１箇所しか動かないので、どこを直したら複数画像に当てられるかご教授頂けないでしょうか。
14
22
 
15
23
 
16
24