magnific popupプラグインで、bxsliderを使っている外部ファイルを読み込みたい

実現させたいことは、モーダルウィンドウで、bxsliderを使っている外部ファイルを読み込みたいということです。
(レスポンシブ)

インラインの内容をモーダルで表示させるプラグインは色々あったのですが、今回のように別ファイルを読み込むというプラグインがなかなかなかったので、magnific popupを選んでみました。

モーダルでページ自体を読み込んで来ること自体はできるのですが、bxsliderが機能しません。
bxsliderだけではなく、他のjavascriptも動かないようです。
/test自体(モーダルで読み込まなければ)ではきちんとbxsliderは動きます。

magnificPopupの指定を「type: 'ajax'」ではなく、試しにtype: 「type:'iframe'」にしてみるときちんと動作します。

こちらがリンク元

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
5    <!-- magnific-popup -->
6    <link rel="stylesheet" href="/lib/magnific-popup/magnific-popup.css">
7    <script src="/lib/magnific-popup/jquery.magnific-popup.min.js"></script>
8</head>
9
10<body>
11    <a href="/test" class="popup">別ファイルへ飛ぶ</a>
12</body>
13</html>

javascript
1$(function() {
2  $('.popup').magnificPopup({
3    type: 'ajax'
4  });
5});

こちらがリンク先（/test）

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
5    <!-- bxslider -->
6        <link rel="stylesheet" href="/lib/bxslider/jquery.bxslider.css">
7    <script src="/lib/bxslider/jquery.bxslider.min.js"></script>
8</head>
9<body>
10    <div class="slider">
11        <a href="#"><div class="slider_box" style="background-image: url(/images/test1.jpg);"></div>
12    </a>
13        <a href="#"><div class="slider_box" style="background-image: url(/images/test2.jpg);"></div>
14    </a>
15        <a href="#"><div class="slider_box" style="background-image: url(/images/test3.jpg);"></div>
16    </a>
17        <a href="#"><div class="slider_box" style="background-image: url(/images/test4.jpg);"></div>
18    </a>
19   </div>
20</body>
21</html>

javascript
1$(function() {
2    if( $('.slider').size() > 0 ) {
3    $('.slider').bxSlider({
4      controls: true,
5      minSlides: 4,
6      maxSlides: 4,
7      slideWidth: 50,
8      slideMargin: 10,
9      pager: true,
10      pagerCustom: '#bx-pager',
11      prevText: '&#12296;',
12      nextText: '&#12297;',
13      infiniteLoop: true
14    });
15});

正しい表示

現状

半日以上調べたのですが、解決策が見つからずで、やっぱりこちらを頼らせていただくことに
しました。
magnific popupでなくとも、もし他の方法で再現できればそれでも構いません。

jquery、javascriptについて、勉強はしているのですが、なかなか自分で解決できるようにならず
今回もお力をお貸しいただけたら幸いです。

何卒よろしくお願いいたします。

kei344

2017/03/30 13:39

iframeで動くのであれば、何が問題なのでしょうか。

hananoko_runrun

2017/03/30 22:59

>kei344様　いつもお世話になります。iframeではフレームの中にスクロールバーが表示されてしまうと思うのですが、今回はブラウザの右側にスクロールバーが出るようにみせたいためです。(別ページが単純に上に表示されているように見せたいです)　拙い説明伝わりますでしょうか？

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

回答1件

ベストアンサー

iframeではフレームの中にスクロールバーが表示されてしまうと思うのですが、今回はブラウザの右側にスクロールバーが出るようにみせたいためです。

【iframeの右スクロールバーを消す方法 - ku ryze denik ●～*】
http://d.hatena.ne.jp/svankmajer/20100520/1274381966

CSS
1html {
2    overflow-y: hidden;
3}

iframe側のページで html { overflow: hidden; } とかするとスクロールが出ないと思います。

追記：

iframeのCSSでも消せますね。 iframe { overflow: hidden; }

【iframeのborderやスクロールバーはCSSだけでは消せない | hacknote】
http://hacknote.jp/archives/1519/

投稿2017/03/31 14:52

編集2017/03/31 14:57

kei344

総合スコア69407

hananoko_runrun

2017/04/01 06:41

>kei344様ありがとうございます！昨日1日、このmagnific popup以外で再現をできるものがないか色々調べたのですが皆帯に短し、で困っていたところでした。こういうところは、プラグインの問題だろうと思い、cssでなんとかする、という考えがなかったのでハッとさせられました。これでなんとかやりたいことができそうです。ありがとうございました！

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