質問編集履歴

2 コード変更

ideal

ideal score 8

2016/12/07 08:39  投稿

iframe を使って lightbox を表示させたい
メインページ上にインラインフレームを使用して、写真のサムネイルを並べています。
このサムネイルをクリックすると全画面にlightboxで表示されるようにしたいのですが、上手くいきません。
インラインフレーム内にlightboxが表示されてしまいます。
iframe内
```html
<link rel="stylesheet" href="/css/import.css" type="text/css">
<link rel="stylesheet" href="/css/photoswipe.css" type="text/css">
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/photoswipe.js"></script>
<script src="/js/jquery.photoswipe.js"></script>
<script>
   ;(function($){
       $(function(){
           $('a.swipe').photoSwipe();
       });
   })(jQuery);
</script>
<ul id="photoswipe">
   <li><p class="image"><a href="画像01.jpg" class="swipe" rel="group1" title="テキスト01"><img src="画像01.jpg" /></a></p></li>
   <li><p class="image"><a href="画像02.jpg" class="swipe" rel="group1" title="テキスト02"><img src="画像02.jpg" /></a></p></li>
   <li><p class="image"><a href="画像03.jpg" class="swipe" rel="group1" title="テキスト03"><img src="画像03.jpg" /></a></p></li>
   <li><p class="image"><a href="画像04.jpg" class="swipe" rel="group1" title="テキスト04"><img src="画像04.jpg" /></a></p></li>
</ul>
```
親ページ
```html
<!DOCTYPE "html">
<html lang="ja">
   <body>
       <header></header>
       <aside></aside>
       <main>
           <iframe width="700" height="600" src="iframe.html" frameborder="0" scrolling="no"></iframe>
       </main>
       <footer></footer>
   </body>
</html>
```
親ページ(iframeとは別ドメイン)にはタグの制限が掛けられていてjavascript等は使えません。
何卒、宜しくお願いいたします。
  • HTML

    24151 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17241 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    13326 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 親→親ページに変更 コード変更

ideal

ideal score 8

2016/12/07 08:36  投稿

iframe を使って lightbox を表示させたい
メインページ上にインラインフレームを使用して、写真のサムネイルを並べています。
このサムネイルをクリックすると全画面にlightboxで表示されるようにしたいのですが、上手くいきません。
インラインフレーム内にlightboxが表示されてしまいます。
iframe内
```html
<a href="img/01.jpg" class="lightbox" title="テスト"><img src="img/01.jpg" border="0"></a>
<link rel="stylesheet" href="/css/import.css" type="text/css">
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/photoswipe.js"></script>
<script>
   ;(function($){
       $(function(){
           $('a.swipe').photoSwipe();
       });
   })(jQuery);
</script>
<ul id="photoswipe">
   <li><p class="image"><a href="画像01.jpg" class="swipe" rel="group1" title="テキスト01"><img src="画像01.jpg" /></a></p></li>
   <li><p class="image"><a href="画像02.jpg" class="swipe" rel="group1" title="テキスト02"><img src="画像02.jpg" /></a></p></li>
   <li><p class="image"><a href="画像03.jpg" class="swipe" rel="group1" title="テキスト03"><img src="画像03.jpg" /></a></p></li>
   <li><p class="image"><a href="画像04.jpg" class="swipe" rel="group1" title="テキスト04"><img src="画像04.jpg" /></a></p></li>
</ul>
```
親にはタグの制限が掛けられていてjavascript等は使えません。
親ページ
```html
<!DOCTYPE "html">
<html lang="ja">
   <body>
       <header></header>
       <aside></aside>
       <main>
           <iframe width="700" height="600" src="iframe.html" frameborder="0" scrolling="no"></iframe>
       </main>
       <footer></footer>
   </body>
</html>
```
親ページ(iframeとは別ドメイン)にはタグの制限が掛けられていてjavascript等は使えません。
何卒、宜しくお願いいたします。
  • HTML

    24151 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17241 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    13326 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る