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

質問

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

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

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

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

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

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

回答No.5

reggaepunc · ベストアンサー

出来ましたよ。
ただし、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/

お礼

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

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

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

回答No.4

abacabu

度々すいません。さっきは変な書き込みを最後にしました。
あれではmainというフォルダを探してしまいます…
こんなサイトあったんですがどうでしょうか？
インライン内部表示で(と言ってもliに入ってますね)
クリックで飛び出し表示します。
アドレス入りきらなかったのでこちらへ
http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-0273763185366809&format=728x90_as&output=html&h=90&w=728&lmt=1232070285&channel=2472067649&ad_type=text_image&flash=10.2.159.1&url=http%3A%2F%2Fwww.skuare.net%2Ftest%2FjPopeye.html&dt=1304942035650&shv=r20110427&jsv=r20110506&saldr=1&correlator=1304942035720&frm=0&adk=3228804839&ga_vid=1958375170.1304941960&ga_sid=1304941960&ga_hid=239378172&ga_fc=1&u_tz=540&u_his=13&u_java=1&u_h=768&u_w=1366&u_ah=768&u_aw=1366&u_cd=32&u_nplug=0&u_nmime=0&biw=1345&bih=583&ref=http%3A%2F%2Fwww.skuare.net%2F2009%2F01%2Flightboxjavascriptjquerypopeye.html&fu=0&ifi=1&dtd=109&xpc=F3qYErupN6&p=http%3A//www.skuare.net

補足

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

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

回答No.3

abacabu

度々お邪魔します。
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

お礼

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

回答No.2

reggaepunc

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

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

補足

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

【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>

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

回答No.1

abacabu

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

お礼

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