みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

インラインフレームを使って、lightboxを表示

いつも大変お世話になっております。

http://okwave.jp/qa/q4686875.html

以前、投稿されていた記事の方とほぼ同じ状況なのですが、
どうしても iframe内にlightboxが表示されてしまいます。

同じやり方をしていると思うのですが・・・・
初心者なもので、回答されている方の内容と違うことを
しているのかもしれません。

もう少し、具体的に簡単な感じで説明していただけると
助かります。

何卒、宜しくお願いします。

投稿日時 - 2011-05-02 19:30:56

QNo.6709547

すぐに回答ほしいです

質問者が選んだベストアンサー

出来ましたよ。
ただし、prototype.jsを学び直す気はないので、jquery版lightboxをカスタムしました。
仕組みは案外単純なもので実現できましたよ。

■仕組み説明。
iframe読み込み完了後(loadメソッドで完了通知を受け取る。)にiframe内のaタグを取得→lightbox()メソッド設定。



■iframe内に画像を置いたデモ。
http://www.0yen-coding.com/test/lightbox/htdocs/
↑の圧縮ファイル。
http://www.0yen-coding.com/test/lightbox/htdocs/htdocs.zip
ie6、
firefox3.6(Mac)にて動作確認済み。
(実行ファイルは入ってないので安全だと思います。)

カスタム元。
http://leandrovieira.com/projects/jquery/lightbox/

投稿日時 - 2011-05-10 21:46:15

お礼

うわーーーーーー
出来ました!!!!!wwwww

有難うございます。
最高です。

いやーーすごいですね。
僕も頑張ります。

投稿日時 - 2011-05-12 03:09:16

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.4

補足

こちらこそ度々ありがとうございます。
記載していただいたURLのどの部分に先程投稿していただいた
内容が記されていますか??
サイトが英語で理解できなく補足させていただきました。

お手数おかけいたしますが、何卒宜しくお願いいたします。

投稿日時 - 2011-05-10 18:44:56

ANo.3

度々お邪魔します。
lightboxの使い方についてのサイトを見つけたのですが
その内容ですとほぼ問題なさそうですが、
私は勘違いした回答をしていたようですね…
lightboxはメインページで表示なんですよね??
だったらlightbox.jsはメインページに外部参照するべきですね。
恐らく…
で!!ここからが問題なんですが、
そのインラインに表示された画像サムネイルからどうやって
メインページのlightboxへリンクを繋ぐか。
インライン内部にlightbox.jsがあれば当然インライン内部に
lightboxが生成されます。
私はlightbox自体を理解していないのでここまでの様です…

単純に考えると
<a href="images/001.jpg" rel="lightbox" title="テスト">
<img src="images/p01.jpg" border="0"></a>
rel="./mein/lightbox"とかにするとか…
多分ダメですよね…

参考URL:http://www.css-lecture.com/log/javascript/011.html

投稿日時 - 2011-05-09 15:05:47

お礼

試してみようと思います。
お忙しい中わざわざ、有難うございます。

投稿日時 - 2011-05-09 15:33:03

ANo.2

現状のソースを貼りつけて頂けると回答しやすいです。

目的が達成出来れば、必ずしもiframeタグを使わなくてもよい、など、
代替え案も見つかるかも知れません。

投稿日時 - 2011-05-07 01:37:53

補足

ご回答有難うございます。
下記にソースを記させていただきます。


【main.html】

<iframe src="item.html" height=250px width=500px hspace=10px vspace=5px frameborder=0 ></iframe>


インラインフレーム内(item.html)の下記を記述しています。
【item.html】

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>



item.htmlのサムネイルには下記を記述しています。
【item.htmlのサムネイル】

<a href="images/001.jpg" rel="lightbox" title="テスト"><img src="images/p01.jpg" border="0"></a>


以上になります。
何卒、宜しくお願いいたします。

投稿日時 - 2011-05-09 14:02:57

ANo.1

独学でWEBサイトを勉強している者です(初心者級)
結局インライン内でlightboxを使うっていう感じで回答します。
インライン要素って何をお使いですか?
イメージとかHTML以外を映し出すなら断然object要素を使う事になると思いますが。
あとそのjsファイルはその画面の方のアドレスにあるんですよね?
(画面のHTMLにjs外部データを参照してるか??触れるのがそっちの画像の為)
私も余り詳しくないのでHTMLに関する事だけ書いておきます。

投稿日時 - 2011-05-03 19:17:16

お礼

お忙しい中ありがとうございます。未だに解決できずです・・・・。

投稿日時 - 2011-05-09 14:03:52

あなたにオススメの質問