編集履歴

質問編集履歴

ソースコードを囲いました。

2018/11/12 02:18

投稿

ringoppi

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,7 +10,7 @@
 ### 該当のソースコード
+```
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- ドロワー、スライドバナーに関するJクエリ -->
@@ -96,7 +96,7 @@
 </script>
+```

コメントでいただいた内容で試したところ、ヘッダーのスライドバナーがうまく作動しません。 htmlのソースをすべて記載します。

2018/11/12 02:18

投稿

ringoppi

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -106,8 +106,322 @@
+```
+<!DOCTYPE html>
-下記に書いてあるような、$161等に置き換える方法を試しましたが
+<html lang="ja">
+<head>
-当方はJSをカスタマイズした経験がなく、書き方がわからずうまく動作しませんでした
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.5, user-scalable=yes">
+<base target="_top">
+<link rel="stylesheet" href="style.css"> <!-- レイアウト -->
+<link rel="stylesheet" href="slide_banner/slick-theme.css"> <!-- メイン上部カルーセルバナー -->
+<link rel="stylesheet" href="slide_banner/slick.css"> <!-- メイン上部カルーセルバナー -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather"> <!-- webフォント -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
+<script src="drawer/drawer.js"></script> <!-- ドロワーアニメーション -->
+<script src="slide_banner/slick.min.js"></script> <!-- メイン上部カルーセルバナー -->
+<script src="iframe_autoheight/jquery.browser.js"></script> <!-- iframe高さ調節 -->
+<script src="iframe_autoheight/jquery-iframe-auto-height.min.js"></script> <!-- iframe高さ調節 -->
+<script>
-https://act2u.net/blog/?p=737
+//jQuery 3.2.1は"$"で、
+//jQuery 1.6.1は"$161"で呼び出せるようにする
+var $161 = $.noConflict(true);
+$(function(){
+  setTimeout(function(){
+    //jQuery 1.6.1でアクセスする要素は、$の代わりに$161でアクセスする
+    $161("iframe[src='main.htm']").iframeAutoHeight();
+  }, 1000);
+  setTimeout(function(){
+    $161("iframe[src='footer.htm']").iframeAutoHeight();
+  }, 1000);
+});
+</script>
+<script>
+$(function() {
+  //jQuery 3.2.1でアクセスする要素はそのまま
+  $('.center-item').slick({
+    infinite: true,
+    dots:true,
+    slidesToShow: 1,
+    centerMode: true,
+    centerPadding:'0',
+    autoplay:true,
+    responsive: [{
+      breakpoint: 480,
+      settings: {
+        centerMode: false,
+      }
+    }]
+  });
+});
+</script>
+</head>
+<body>
+      <header>
+      <div id="head_flex">
+	<div class="left">&nbsp;</div>
+	<div class="center"><img src="img/logo.png"></div>
+	<div class="right">
+	<div class="drawer_menu">
+		<div class="drawer_bg"></div>
+		<button type="button" class="drawer_button">
+			<span class="drawer_bar drawer_bar1"></span>
+			<span class="drawer_bar drawer_bar2"></span>
+			<span class="drawer_bar drawer_bar3"></span>
+			<span class="drawer_menu_text drawer_text">MENU</span>
+			<span class="drawer_close drawer_text">CLOSE</span>
+		</button>
+		<nav class="drawer_nav_wrapper">
+		<iframe src="https://www.rakuten.ne.jp/gold/loopsky/sptest/drawer.htm" scrolling="yes" width="100%" height="100%" frameborder="0"></iframe>
+		</nav>
+	</div>
+	</div>
+      </div>
+      </header>
+      <ul class="slider center-item">
+	<li><img src="https://www.rakuten.ne.jp/gold/loopsky/header_wideslider/img/index/key-performax01.jpg"></li>
+	<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>
+	<li><a href="https://item.rakuten.co.jp/loopsky/tbstl-15/"><img src="img/slide/tbstl-15.jpg"></a></li>
+	<li><a href="https://item.rakuten.co.jp/loopsky/as-282sbr/"><img src="img/slide/as-282sbr.jpg"></a></li>
+	<li><a href="https://item.rakuten.co.jp/loopsky/52551/"><img src="img/slide/52551.jpg"></a></li>
+	<li><a href="https://item.rakuten.co.jp/loopsky/52820/"><img src="img/slide/52820.jpg"></a></li>
+      </ul>
+      <iframe src="main.htm" scrolling="no"></iframe>
+      <iframe src="footer.htm" scrolling="no"></iframe>
+</body>
+</html>
+```
+1.6.1に関するJSの記述をせず下記の記述だけの場合、ドロワー、スライドバナーは問題なく作動します。
+```
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
+<script>
+$(function() {
+  //jQuery 3.2.1でアクセスする要素はそのまま
+  $('.center-item').slick({
+    infinite: true,
+    dots:true,
+    slidesToShow: 1,
+    centerMode: true,
+    centerPadding:'0',
+    autoplay:true,
+    responsive: [{
+      breakpoint: 480,
+      settings: {
+        centerMode: false,
+      }
+    }]
+  });
+});
+</script>
+```
+下記を追記すると、ドロワーは問題ありませんが、スライドバナーの左右のボタンを押したときにアニメーションが動作しません。
+```
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
+```
+下記も追加すると、iframeの高さ調整ができるようになり、ドロワーも問題ありませんが、スライドバナーの画像が縦に並んだレイアウトになってしまいます。
+```
+<script>
+//jQuery 3.2.1は"$"で、
+//jQuery 1.6.1は"$161"で呼び出せるようにする
+var $161 = $.noConflict(true);
+$(function(){
+  setTimeout(function(){
+    //jQuery 1.6.1でアクセスする要素は、$の代わりに$161でアクセスする
+    $161("iframe[src='main.htm']").iframeAutoHeight();
+  }, 1000);
+  setTimeout(function(){
+    $161("iframe[src='footer.htm']").iframeAutoHeight();
+  }, 1000);
+});
+</script>
+```