lightbox2をiframeから外に表示したい

質問

lightbox2を iframe内で使っています。
iframe内のサムネイル画像をクリックした時、画面全体に表示できるようにしたいのですが、良く分かりません。

自分でも調べて「http://bontetsu.jp/?p=41」にそれらしい物を見付けたのですが、 iframe内のサムネイルは左のフレームによって変化するのでこちらの方法では無理だと思うのですが・・・。

ご存知の方いらっしゃいましたら宜しくお願い致します。

回答No.3

fujillin · ベストアンサー

#2です。

まだ、よくわかってませんが…

＞現状で全体で2000以上のデータ有ります
ご提示のサイトの方法は、あらかじめlightboxで表示される可能性のある画像リストを親ドキュメント内に（非表示で）セットしておくというものですから、2000個のデータを記載しておく気になるかどうかですね。（ＳＳＩなどで行なうというのもあるかもですが、表示しないデータなので…）

全体の構成がなぜフレームでなければならないのかなど良くわかりませんが（それがなければ問題はなくなるので）、CGIからの出力を画像のリストだけにするなどにしてajaxで検索（？）を行なえば、フレームなしでもいけそうな・・・　　というのは、ご質問内容とは関係ないので置いておくとして。

一度拡大したものを、もう一度拡大するというのもよくわかりませんが、まぁ、それも置いておくとして。
どうやら画像の数が多そうなので、画像の拡大表示の部分だけのスクリプトを作ってしまった方が簡単な気もしますが、それもご質問の内容とは違うので・・・

lightboxだとAPIが開放されていないみたいなので、事前に画像リストをセットしておく必要がありますが、同様の機能を持つものでＡＰＩが開放されているライブラリを用いれば、直接画像を指定することで拡大表示が可能なものがあります。
　例えば：hislide
　　　http://www.highslide.com/ref/hs.src
このようなものを利用すれば、画像のsrcを指定するだけで、都度指定する画像を拡大表示することが可能ですから、スクリプトの実行を親ドキュメントで行いさえすればよくなるので面倒なことを気にしなくても良くなるのではないでしょうか。
（ＡＰＩが利用できる同様のライブラリは他にも沢山あると思います。）

lightboxを利用する方法でも、データを事前に全部をセットしておかなくても、スクリプトで都度対象の非表示リンクを親ドキュメント内に生成して、それにlightboxを適用させ実行させるという方法で同様の結果が得られると思います。
しかし、ＡＰＩが使えるライブラリを利用する場合に比べると少々複雑になるのはやむを得ません。
もちろん、内容を解読してカスタマイズするという方法もありますが、そこまでいってしまうと自作とそれほどは変わらないので…

お礼

この度はお忙しい中
直ぐに回答をして頂きまして
有り難うございました。

ご紹介頂いたページが英語だったので
ちっょと腰が引けてしまいまして・・・。

で、結局私の
英語力と知識の不足の為
今イチ上手く出来なかったのですが・・・。

なので初めにご指摘頂いた通り
この種のページを作る場合は
非フケーム構造にしよう、と固く心に刻みました。
フレーム構造→lightbox→超面倒、ミタイナ・・・

貴重なお時間裂いて頂いて
ホントに有り難うございました。

回答No.2

fujillin

#1です。

まず、言葉がよくわかりません。
メインフレームはインラインフレームでは？（←そもそもよくわからない）
どれが親ウィンドウで、どれがインラインフレームなのか良くわかりませんし、もしかして入れ子になっていたりするのかも不明ですが…

＞左フレームからCGIにデータを渡し、メイン・フレームの画像を変えています
画像群（サムネイル）ではなくて1個の画像なのでしょうか？
単に画像を表示するだけにわざわざＣＧＩを利用している理由がよくわかりませんが、よほど複雑な処理の結果選定される画像なのでしょうか？
いずれにしろ、その出力にスクリプトを入れておけばよいのでは？
それとも全体数が多すぎて、親ドキュメントの方に非表示の画像群をあらかじめセットできないということでしょか？

ご提示のサイトの方法は、要領としては
1）ウィンドウ全体を表示領域としている（親となっている）ドキュメント内に非表示の画像群を設定しておいて、lightboxもこのドキュメント内に設定しておく。
　　（ごく普通の設定と同じ。ただし画像群は非表示なので直接クリックされない）
2）インラインフレームに表示されているサムネイルをクリックしたら、スクリプトで親の（非表示の）画像をクリックしたことにするという仕組みでは？
　（当然ながら、この部分の補助的なスクリプトが、インラインフレームのドキュメントに必要になります）

補足

お忙しい中、ご回答頂き有り難うございます。
先ほどは、言葉足らず＆意味不明ですいませんでした。

まず、メインフレームはフレームの名前です。
で、そのメインフレームがインラインフレームとなっています。

上の図の通り、3つ全てのフレームを含む全体のファイルが「index.html」です。

で、先ほどの補足ですっ飛ばしていた行程が有るのでもう一度改めてご説明致します。(すっ飛ばしてスイマセン)

（1） 左フレームにカテゴリーを設定し、各カテゴリーをクリックしてCGIへ引数を渡す。

（2） CGIは渡された引数により全データの中から該当するカテゴリーを持つ項目をメインフレーム(インラインフレーム)内に列挙する。

（3） （2）で並んだ項目をクリックするとメインフレーム(インラインフレーム)内にサムネイルが表示される(1つだけ)

（4） さらに（3）で表示されたサムネイルをクリックする

（5） メインフレーム(インラインフレーム)内にサムネイルと共に用意した拡大画像用の画像ファイルが表示される(現状)

の（5）の拡大画像が表示されるエリアを現状のメインフレーム(インラインフレーム)内では無く、外側の3つ全てのフレームを含む全体の「index.html」の画面一杯に表示させたいと言う事なのですが・・・。

あと
>それとも全体数が多すぎて、親ドキュメントの方に非表示の画像群をあらかじめセットできないということでしょか？
との事ですが、現状で全体で2000以上のデータ有ります。(更に増えていきます・・・)
この場合2000個全てを、更に数が増えていくごとにインラインフレームに追記が必要と言う事でしょうか?

以上、ヨロシクオネガイシマス m(_ _)m

回答No.1

fujillin

試していませんが、ご提示のサイトに書いてある方法で可能ではないかと思いますが…

＞iframe内のサムネイルは左のフレームによって変化するのでこちらの方法では無理だと思うのですが・
何が変化するから無理なのでしょうか？
単に、表示する際のレイアウトが変わるだけなら、なんら問題がないと思いますが？

補足

回答有り難うございます。
左フレームからCGIにデータを渡し、メイン・フレームの画像を変えています。
具体的には、左フレームより、「ターゲットはメインフレーム、画像はAs.jpg」とリクエストし、結果メインフレームはAs.jpg（サムネイル）を表示、更にそれをクリックするとA.jpg(拡大画像)が表示されると言った案配なのですが、「http://bontetsu.jp/?p=41」のサイトでは入れ子構造の一番外側の「index.html」の<iframe>～</iframe>のタグの間に画像のサムネイルの指定をする様に指示されて有ったと思うのですが、その場合、左のフレームからのフォーム・リクエストで次々とサムネイルが変わっていくと言うのは適用出来ないでは!?と、思ったのですが・・・。
勿論<iframe>～</iframe>にSSIを使い、一番外側をindex.shtmlにしてフォーム・リクエスト時にターゲットを"_top"にして全体を読み込めば可能と思いますが、それではフレームを使っている意味が有りませんし・・・。

ヨロシクお願いします。