質問編集履歴
2
ソースコードを囲いました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
ドロワー、スライドバナー、iframeの自動高さ調節のJqueryを1ページ内で動作させたいのですが、jqueryの3.2.1と1.6.1を共存させると下の行に記述したjqueryしか有効にならないようで、共存させる方法を試したのですがうまくいきません。$161等に置き換える方法を試しましたが当方はJSをカスタマイズした経験がなく、既存のコードを書き換える方法を教えていただけないでしょうか。
|
|
5
5
|
|
|
6
6
|
### 該当のソースコード
|
|
7
|
-
|
|
7
|
+
```
|
|
8
8
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- ドロワー、スライドバナーに関するJクエリ -->
|
|
9
9
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script> <!-- iframe高さ調節に関するJクエリ -->
|
|
10
10
|
|
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
});
|
|
48
48
|
});
|
|
49
49
|
</script>
|
|
50
|
+
```
|
|
50
51
|
|
|
51
52
|
|
|
52
|
-
|
|
53
53
|
### 試したこと
|
|
54
54
|
|
|
55
55
|
```
|
1
コメントでいただいた内容で試したところ、ヘッダーのスライドバナーがうまく作動しません。 htmlのソースをすべて記載します。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -52,6 +52,163 @@
|
|
|
52
52
|
|
|
53
53
|
### 試したこと
|
|
54
54
|
|
|
55
|
+
```
|
|
56
|
+
<!DOCTYPE html>
|
|
55
|
-
|
|
57
|
+
<html lang="ja">
|
|
58
|
+
<head>
|
|
56
|
-
|
|
59
|
+
<meta charset="UTF-8">
|
|
60
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.5, user-scalable=yes">
|
|
61
|
+
<base target="_top">
|
|
62
|
+
<link rel="stylesheet" href="style.css"> <!-- レイアウト -->
|
|
63
|
+
<link rel="stylesheet" href="slide_banner/slick-theme.css"> <!-- メイン上部カルーセルバナー -->
|
|
64
|
+
<link rel="stylesheet" href="slide_banner/slick.css"> <!-- メイン上部カルーセルバナー -->
|
|
65
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather"> <!-- webフォント -->
|
|
66
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
|
|
67
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
|
|
68
|
+
<script src="drawer/drawer.js"></script> <!-- ドロワーアニメーション -->
|
|
69
|
+
<script src="slide_banner/slick.min.js"></script> <!-- メイン上部カルーセルバナー -->
|
|
70
|
+
<script src="iframe_autoheight/jquery.browser.js"></script> <!-- iframe高さ調節 -->
|
|
71
|
+
<script src="iframe_autoheight/jquery-iframe-auto-height.min.js"></script> <!-- iframe高さ調節 -->
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
<script>
|
|
57
|
-
|
|
75
|
+
//jQuery 3.2.1は"$"で、
|
|
76
|
+
//jQuery 1.6.1は"$161"で呼び出せるようにする
|
|
77
|
+
var $161 = $.noConflict(true);
|
|
78
|
+
|
|
79
|
+
$(function(){
|
|
80
|
+
|
|
81
|
+
setTimeout(function(){
|
|
82
|
+
//jQuery 1.6.1でアクセスする要素は、$の代わりに$161でアクセスする
|
|
83
|
+
$161("iframe[src='main.htm']").iframeAutoHeight();
|
|
84
|
+
}, 1000);
|
|
85
|
+
|
|
86
|
+
setTimeout(function(){
|
|
87
|
+
$161("iframe[src='footer.htm']").iframeAutoHeight();
|
|
88
|
+
}, 1000);
|
|
89
|
+
|
|
90
|
+
});
|
|
91
|
+
</script>
|
|
92
|
+
|
|
93
|
+
<script>
|
|
94
|
+
$(function() {
|
|
95
|
+
//jQuery 3.2.1でアクセスする要素はそのまま
|
|
96
|
+
$('.center-item').slick({
|
|
97
|
+
infinite: true,
|
|
98
|
+
dots:true,
|
|
99
|
+
slidesToShow: 1,
|
|
100
|
+
centerMode: true,
|
|
101
|
+
centerPadding:'0',
|
|
102
|
+
autoplay:true,
|
|
103
|
+
responsive: [{
|
|
104
|
+
breakpoint: 480,
|
|
105
|
+
settings: {
|
|
106
|
+
centerMode: false,
|
|
107
|
+
}
|
|
108
|
+
}]
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
</script>
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
</head>
|
|
115
|
+
<body>
|
|
116
|
+
|
|
117
|
+
<header>
|
|
118
|
+
<div id="head_flex">
|
|
119
|
+
<div class="left"> </div>
|
|
120
|
+
<div class="center"><img src="img/logo.png"></div>
|
|
121
|
+
<div class="right">
|
|
122
|
+
<div class="drawer_menu">
|
|
123
|
+
|
|
124
|
+
<div class="drawer_bg"></div>
|
|
125
|
+
<button type="button" class="drawer_button">
|
|
126
|
+
<span class="drawer_bar drawer_bar1"></span>
|
|
127
|
+
<span class="drawer_bar drawer_bar2"></span>
|
|
128
|
+
<span class="drawer_bar drawer_bar3"></span>
|
|
129
|
+
<span class="drawer_menu_text drawer_text">MENU</span>
|
|
130
|
+
<span class="drawer_close drawer_text">CLOSE</span>
|
|
131
|
+
</button>
|
|
132
|
+
<nav class="drawer_nav_wrapper">
|
|
133
|
+
<iframe src="https://www.rakuten.ne.jp/gold/loopsky/sptest/drawer.htm" scrolling="yes" width="100%" height="100%" frameborder="0"></iframe>
|
|
134
|
+
</nav>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</header>
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
<ul class="slider center-item">
|
|
142
|
+
<li><img src="https://www.rakuten.ne.jp/gold/loopsky/header_wideslider/img/index/key-performax01.jpg"></li>
|
|
143
|
+
<li><a href="https://item.rakuten.co.jp/loopsky/organdy-curtain/"><img src="https://www.rakuten.ne.jp/gold/loopsky/header_wideslider/img/index/key-curtain.jpg"></a></li>
|
|
144
|
+
<li><a href="https://item.rakuten.co.jp/loopsky/tbstl-15/"><img src="img/slide/tbstl-15.jpg"></a></li>
|
|
145
|
+
<li><a href="https://item.rakuten.co.jp/loopsky/as-282sbr/"><img src="img/slide/as-282sbr.jpg"></a></li>
|
|
146
|
+
<li><a href="https://item.rakuten.co.jp/loopsky/52551/"><img src="img/slide/52551.jpg"></a></li>
|
|
147
|
+
<li><a href="https://item.rakuten.co.jp/loopsky/52820/"><img src="img/slide/52820.jpg"></a></li>
|
|
148
|
+
</ul>
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
<iframe src="main.htm" scrolling="no"></iframe>
|
|
152
|
+
<iframe src="footer.htm" scrolling="no"></iframe>
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
</body>
|
|
156
|
+
</html>
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
1.6.1に関するJSの記述をせず下記の記述だけの場合、ドロワー、スライドバナーは問題なく作動します。
|
|
163
|
+
```
|
|
164
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
|
|
165
|
+
|
|
166
|
+
<script>
|
|
167
|
+
$(function() {
|
|
168
|
+
//jQuery 3.2.1でアクセスする要素はそのまま
|
|
169
|
+
$('.center-item').slick({
|
|
170
|
+
infinite: true,
|
|
171
|
+
dots:true,
|
|
172
|
+
slidesToShow: 1,
|
|
173
|
+
centerMode: true,
|
|
174
|
+
centerPadding:'0',
|
|
175
|
+
autoplay:true,
|
|
176
|
+
responsive: [{
|
|
177
|
+
breakpoint: 480,
|
|
178
|
+
settings: {
|
|
179
|
+
centerMode: false,
|
|
180
|
+
}
|
|
181
|
+
}]
|
|
182
|
+
});
|
|
183
|
+
});
|
|
184
|
+
</script>
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
下記を追記すると、ドロワーは問題ありませんが、スライドバナーの左右のボタンを押したときにアニメーションが動作しません。
|
|
189
|
+
```
|
|
190
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
下記も追加すると、iframeの高さ調整ができるようになり、ドロワーも問題ありませんが、スライドバナーの画像が縦に並んだレイアウトになってしまいます。
|
|
195
|
+
```
|
|
196
|
+
<script>
|
|
197
|
+
//jQuery 3.2.1は"$"で、
|
|
198
|
+
//jQuery 1.6.1は"$161"で呼び出せるようにする
|
|
199
|
+
var $161 = $.noConflict(true);
|
|
200
|
+
|
|
201
|
+
$(function(){
|
|
202
|
+
|
|
203
|
+
setTimeout(function(){
|
|
204
|
+
//jQuery 1.6.1でアクセスする要素は、$の代わりに$161でアクセスする
|
|
205
|
+
$161("iframe[src='main.htm']").iframeAutoHeight();
|
|
206
|
+
}, 1000);
|
|
207
|
+
|
|
208
|
+
setTimeout(function(){
|
|
209
|
+
$161("iframe[src='footer.htm']").iframeAutoHeight();
|
|
210
|
+
}, 1000);
|
|
211
|
+
|
|
212
|
+
});
|
|
213
|
+
</script>
|
|
214
|
+
```
|