iframe を使って lightbox を表示させたい

メインページ上にインラインフレームを使用して、写真のサムネイルを並べています。
このサムネイルをクリックすると全画面にlightboxで表示されるようにしたいのですが、上手くいきません。
インラインフレーム内にlightboxが表示されてしまいます。

iframe内

html
1<link rel="stylesheet" href="/css/photoswipe.css" type="text/css">
2<script src="/js/jquery-1.10.2.min.js"></script>
3<script src="/js/jquery.photoswipe.js"></script>
4<script>
5	;(function($){
6		$(function(){
7			$('a.swipe').photoSwipe();
8		});
9	})(jQuery);
10</script>
11
12<ul id="photoswipe">
13	<li><p class="image"><a href="画像01.jpg" class="swipe" rel="group1" title="テキスト01"><img src="画像01.jpg" /></a></p></li>
14	<li><p class="image"><a href="画像02.jpg" class="swipe" rel="group1" title="テキスト02"><img src="画像02.jpg" /></a></p></li>
15	<li><p class="image"><a href="画像03.jpg" class="swipe" rel="group1" title="テキスト03"><img src="画像03.jpg" /></a></p></li>
16	<li><p class="image"><a href="画像04.jpg" class="swipe" rel="group1" title="テキスト04"><img src="画像04.jpg" /></a></p></li>
17</ul>

親ページ

html
1<!DOCTYPE "html">
2<html lang="ja">
3	<body>
4		<header></header>
5		<aside></aside>
6		<main>
7			<iframe width="700" height="600" src="iframe.html" frameborder="0" scrolling="no"></iframe>
8		</main>
9		<footer></footer>
10	</body>
11</html>

親ページ（iframeとは別ドメイン）にはタグの制限が掛けられていてjavascript等は使えません。
何卒、宜しくお願いいたします。

kei344

2016/12/06 12:36

「親」とは「親ページ」のことでしょうか。またその場合同じドメインでしょうか。

Takamoso

2016/12/06 16:36 編集

自分が試したコードで良いので、js/jquery等も記述してください。また、iframe内のhtmlも追記してください。

ideal

2016/12/06 23:41

コメントありがとうございます。親ページのことです。別ドメインとなっております。コード追記いたしましたので何卒よろしくお願いいたします。

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

回答2件

親ページでJSが使えないとなると、僕の知る限りでは対処法はありません。

投稿2016/12/06 23:54

Takamoso

総合スコア248

ideal

2016/12/07 02:31

ご回答ありがとうございます。親ページの制限がいつも頭を悩ませます・・・

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

photoswipeを使用したことが無いので具体的な仕組みはわかりかねますが、
大体この手のものは、body最後に要素を追加し、
ウィンドウに対して最大サイズで目いっぱい表示させることをします。

その為、インラインフレームで実行してもインラインフレーム内でしか表示されません。

親フレームでjsが使用できなくてインラインフレームで実行できる意味はわかりませんが、
対処法として、
子(インライン)フレームから親フレームのbody直下に要素を追加させてあげます。
これは、photoswipe上で行っているので、プラグインを書き換える必要があります。
※ライセンスに違反しないか注意すること

ここが参考になると思います。
iframeの親から子、子から親の操作をする

投稿2016/12/07 00:28

mukkun

総合スコア882

Takamoso

2016/12/07 01:56

これは同一ドメインの場合の話ではないでしょうか？

ideal

2016/12/07 02:33

ご回答ありがとうございます。残念ながら、別ドメインなのです。参考サイトありがとうございます。 js、jqueryが得意ではないのですが、やってみます。

mukkun

2016/12/07 03:20 編集

ithat_meさん「親ページ（iframeとは別ドメイン）」と記載されていましたね。「src="iframe.html"」とコードがあったので見逃してました。すみません。 --修正(質問) idealさん別ドメインのサーバは管理下にありますでしょうか。「Access-Control-Allow-Origin:」を設定すれば実現できるかもしれません。

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

あなたの回答