質問編集履歴

1

表示崩れの修正

2020/09/23 03:25

投稿

sala_33
sala_33

スコア5

test CHANGED
File without changes
test CHANGED
@@ -34,61 +34,59 @@
34
34
 
35
35
  <div class="product-image-main" style="height: 440px;">
36
36
 
37
- <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o3.jpg?cmsp_timestamp=20200619112104" class="mainImage" style="max-height: 440px; display: block;">
37
+ <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o3.jpg?cmsp_timestamp=20200619112104" class="mainImage" style="max-height: 440px; display: block;"></div>
38
-
39
- </div>
40
38
 
41
39
  <div class="product-image-thumb grid_row">
42
40
 
43
41
  <ul>
44
42
 
45
- <li class="col-lg-3 col" style="height: 101.219px;">
43
+ <li class="col-lg-3 col" style="height: 101.219px;">
46
44
 
47
45
  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
48
46
 
49
47
  </li>
50
48
 
51
- <li class="col-lg-3 col" style="height: 101.219px;">
49
+ <li class="col-lg-3 col" style="height: 101.219px;">
52
50
 
53
51
  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o1.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
54
52
 
55
53
  </li>
56
54
 
55
+ <li class="col-lg-3 col" style="height: 101.219px;">
56
+
57
+ <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o2.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
58
+
59
+ </li>
60
+
57
61
  <li class="col-lg-3 col" style="height: 101.219px;">
58
62
 
59
- <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o2.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
63
+ <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o3.jpg?cmsp_timestamp=20200619112104" class="thumb thumb-active" style="max-height: 101.219px;">
60
64
 
61
65
  </li>
62
66
 
63
67
  <li class="col-lg-3 col" style="height: 101.219px;">
64
68
 
65
- <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o3.jpg?cmsp_timestamp=20200619112104" class="thumb thumb-active" style="max-height: 101.219px;">
69
+ <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o4.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
70
+
71
+ </li>
72
+
73
+ <li class="col-lg-3 col" style="height: 101.219px;">
74
+
75
+ <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o5.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
66
76
 
67
77
  </li>
68
78
 
69
79
  <li class="col-lg-3 col" style="height: 101.219px;">
70
80
 
71
- <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o4.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
72
-
73
- </li>
74
-
75
- <li class="col-lg-3 col" style="height: 101.219px;">
76
-
77
- <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o5.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
78
-
79
- </li>
80
-
81
- <li class="col-lg-3 col" style="height: 101.219px;">
82
-
83
81
  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o6.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
84
82
 
85
83
  </li>
86
84
 
87
- </ul>
85
+         </ul>
88
86
 
89
87
  </div>
90
88
 
91
- </div>
89
+     </div>
92
90
 
93
91
  ```
94
92
 
@@ -112,11 +110,13 @@
112
110
 
113
111
  border: 1px solid <{$current_color}>;
114
112
 
113
+ }
114
+
115
- }```
115
+ ```
116
-
117
-
118
-
119
- ### 該当のソースコード
116
+
117
+
118
+
119
+
120
120
 
121
121
  ```javaScript
122
122
 
@@ -150,7 +150,45 @@
150
150
 
151
151
 
152
152
 
153
- });
153
+ });
154
+
155
+ });
156
+
157
+ ```
158
+
159
+ ```javaScript
160
+
161
+
162
+
163
+ $('img.thumb').click(function(){
164
+
165
+
166
+
167
+ $(this).parent().siblings().children().removeClass('thumb-active');
168
+
169
+
170
+
171
+ var selectedSrc = $(.thumb).attr('src');
172
+
173
+ $('img.mainImage').stop().fadeOut(300,
174
+
175
+ function(){
176
+
177
+ $('img.mainImage').attr('src', selectedSrc);
178
+
179
+ $('img.mainImage').fadeIn(300);
180
+
181
+ }
182
+
183
+ );
184
+
185
+
186
+
187
+ $(this).addClass('thumb-active');
188
+
189
+
190
+
191
+ });
154
192
 
155
193
  $('img.mainImage').click(function(){
156
194