lightbox2を iframe内で使っています。
iframe内のサムネイル画像をクリックした時、画面全体に表示できるようにしたいのですが、良く分かりません。
自分でも調べて「http://bontetsu.jp/?p=41」にそれらしい物を見付けたのですが、 iframe内のサムネイルは左のフレームによって変化するのでこちらの方法では無理だと思うのですが・・・。
ご存知の方いらっしゃいましたら宜しくお願い致します。
No.3ベストアンサー
- 回答日時:
#2です。
まだ、よくわかってませんが…
>現状で全体で2000以上のデータ有ります
ご提示のサイトの方法は、あらかじめlightboxで表示される可能性のある画像リストを親ドキュメント内に(非表示で)セットしておくというものですから、2000個のデータを記載しておく気になるかどうかですね。(SSIなどで行なうというのもあるかもですが、表示しないデータなので…)
全体の構成がなぜフレームでなければならないのかなど良くわかりませんが(それがなければ問題はなくなるので)、CGIからの出力を画像のリストだけにするなどにしてajaxで検索(?)を行なえば、フレームなしでもいけそうな・・・ というのは、ご質問内容とは関係ないので置いておくとして。
一度拡大したものを、もう一度拡大するというのもよくわかりませんが、まぁ、それも置いておくとして。
どうやら画像の数が多そうなので、画像の拡大表示の部分だけのスクリプトを作ってしまった方が簡単な気もしますが、それもご質問の内容とは違うので・・・
lightboxだとAPIが開放されていないみたいなので、事前に画像リストをセットしておく必要がありますが、同様の機能を持つものでAPIが開放されているライブラリを用いれば、直接画像を指定することで拡大表示が可能なものがあります。
例えば:hislide
http://www.highslide.com/ref/hs.src
このようなものを利用すれば、画像のsrcを指定するだけで、都度指定する画像を拡大表示することが可能ですから、スクリプトの実行を親ドキュメントで行いさえすればよくなるので面倒なことを気にしなくても良くなるのではないでしょうか。
(APIが利用できる同様のライブラリは他にも沢山あると思います。)
lightboxを利用する方法でも、データを事前に全部をセットしておかなくても、スクリプトで都度対象の非表示リンクを親ドキュメント内に生成して、それにlightboxを適用させ実行させるという方法で同様の結果が得られると思います。
しかし、APIが使えるライブラリを利用する場合に比べると少々複雑になるのはやむを得ません。
もちろん、内容を解読してカスタマイズするという方法もありますが、そこまでいってしまうと自作とそれほどは変わらないので…
この度はお忙しい中
直ぐに回答をして頂きまして
有り難うございました。
ご紹介頂いたページが英語だったので
ちっょと腰が引けてしまいまして・・・。
で、結局私の
英語力と知識の不足の為
今イチ上手く出来なかったのですが・・・。
なので初めにご指摘頂いた通り
この種のページを作る場合は
非フケーム構造にしよう、と固く心に刻みました。
フレーム構造→lightbox→超面倒、ミタイナ・・・
貴重なお時間裂いて頂いて
ホントに有り難うございました。
No.2
- 回答日時:
#1です。
まず、言葉がよくわかりません。
メインフレームはインラインフレームでは?(←そもそもよくわからない)
どれが親ウィンドウで、どれがインラインフレームなのか良くわかりませんし、もしかして入れ子になっていたりするのかも不明ですが…
>左フレームからCGIにデータを渡し、メイン・フレームの画像を変えています
画像群(サムネイル)ではなくて1個の画像なのでしょうか?
単に画像を表示するだけにわざわざCGIを利用している理由がよくわかりませんが、よほど複雑な処理の結果選定される画像なのでしょうか?
いずれにしろ、その出力にスクリプトを入れておけばよいのでは?
それとも全体数が多すぎて、親ドキュメントの方に非表示の画像群をあらかじめセットできないということでしょか?
ご提示のサイトの方法は、要領としては
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
- 回答日時:
試していませんが、ご提示のサイトに書いてある方法で可能ではないかと思いますが…
>iframe内のサムネイルは左のフレームによって変化するのでこちらの方法では無理だと思うのですが・
何が変化するから無理なのでしょうか?
単に、表示する際のレイアウトが変わるだけなら、なんら問題がないと思いますが?
この回答への補足
回答有り難うございます。
左フレームからCGIにデータを渡し、メイン・フレームの画像を変えています。
具体的には、左フレームより、「ターゲットはメインフレーム、画像はAs.jpg」とリクエストし、結果メインフレームはAs.jpg(サムネイル)を表示、更にそれをクリックするとA.jpg(拡大画像)が表示されると言った案配なのですが、「http://bontetsu.jp/?p=41」のサイトでは入れ子構造の一番外側の「index.html」の<iframe>~</iframe>のタグの間に画像のサムネイルの指定をする様に指示されて有ったと思うのですが、その場合、左のフレームからのフォーム・リクエストで次々とサムネイルが変わっていくと言うのは適用出来ないでは!?と、思ったのですが・・・。
勿論<iframe>~</iframe>にSSIを使い、一番外側をindex.shtmlにしてフォーム・リクエスト時にターゲットを"_top"にして全体を読み込めば可能と思いますが、それではフレームを使っている意味が有りませんし・・・。
ヨロシクお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- Windows 10 Windows10の画像ファイルのサムネールがアイコン表示になってしまいました。 3 2022/07/09 13:01
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- フリーソフト 画像貼り付け、URLに飛べる軽いメモ帳 3 2022/05/12 07:42
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- SEO WP内の検索で403エラーが出される問題について 1 2022/11/26 08:46
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- その他(ブラウザ) エッジのスタート画面について 2 2022/08/17 11:12
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
サムネイルにマウスオーバーで...
-
textareaに画像を表示したい
-
サムネイルをクリックするとコ...
-
Javascriptで指定した日付と時...
-
jCarouselとColorBoxの組み合わ...
-
1枚の画像をクリックすると複数...
-
JavaScriptとチェックボックス...
-
javascriptで毎月替わる画像
-
USEMAPでの指定区域にマウスオ...
-
Titanium クリックで画像を変更...
-
透過pngの透明部分以外をクリッ...
-
cookieによる画像切り替えについて
-
Javascript で共通の処理をどこ...
-
プラグイン識別_フラッシュflash
-
MAX関数を使ってからLEFT JOIN...
-
JavaScriptで変更した属性の元...
-
createElementで作成した要素を...
-
動的にHTMLコンテンツを吹き出...
-
同一ページ内で、任意の文字列...
-
カレントページ aタグではなく...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
画像ランダム表示、しかしダブ...
-
bxsliderにて読み込み後に内容...
-
画像を切り替えランダム表示
-
1枚の画像をクリックすると複数...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
小窓について教えて下さい。
-
スライダーを実装した場合、ペ...
-
スワップイメージが上手く動作...
-
USEMAPでの指定区域にマウスオ...
-
1枚の画像をクリックして複数の...
-
クリッカブルマップの一部分だ...
-
オンマウスで、画像切り替え+...
-
iframe内のリンク文字のマウス...
-
edgeでスクロールバーに色が表...
-
画像の上に画像リンクを貼る方法
-
prettyphotoの画像表示について
おすすめ情報