子ウインドウで選択した画像を親ウィンドウで表示するには？

Question

androidのchrome や iPhone のsafari のHTMLファイルに画像を表示するようにしておいて、
でも、初期状態では画像がなく、
ボタンを押したらポップアップで、画像をサムネイル表示して、その画像自体がボタンになっていて、
画像を選んだら、ポップアップのウィンドウが閉じるのと同時に、
元のhtml の画像の場所に、選んだ画像が表示されるようにする・・・

ってことは javascript や CSS で出来ますか？

Answer 1

質問を読んだ限りだと(子ウィンドウというより)LightBox系のポップアップ(jQuery)で画像を表示してそれをclickすると画像が表示されるという流れに思えます。
どちらの意味合いか分かりかねますが可能だと思います。

Comments

[it_solution_lab]

元のHTMLには、画像を表示する設定（たとえば img src でも何でも良い）があって、
ただし初期状態では、画像がない・・・
あるボタンを押すとポップアップでウィンドウが開いて、画像のサムネール表示し、
そのいずれかの画像をクリック（タップ）すると、ポップアップが閉じて、
元のhtmlの画像を表示するエリアに、タップした画像が表示される。
その後は、それを繰り返すと画像が入れ替わる。

そんな動きです

[Cf_cwd]

なるほど。では質問の可能ですか?と質問に関して回答すると可能です。
JavaScriptのDOM操作(document.createElement()やdocument.getElementById())とCSSのdisplay : none;やdisplay : block;を使用すると可能でしょう。
実は自分も今自作でウィンドウポップアップのライブラリを自作していますのでタイムリーな話題です。
具体的なコードになるとさまざまな手法があるので考え方について少しコードを示しつつ後程記述します(現在時間に余裕がないため)。

[Cf_cwd]

以下一例としてまずjs側にポップアップウィンドウを持たせる例。
button#popup_windowがhtmlとして存在するとする。
(function (){
function createWindow(){
var _div=document.createElement("div");
_div.setAttribute("id","popup");
//Windowに見えるようStyleを設定
//display : none;
//またこの要素を削除、または非表示にする処理を記述しておく。
//(今回は非表示にして使いまわすことを想定する)
　 //その処理をイベントにセットして#popup内から呼べるようにしておく
/*
ul#images>(li>img)*5
ulの中にliがあり、img要素がその中にあるelementを作成する処理
　　　それを_ul_imagesという変数に入れたと仮定する
*/
_div.innerHTML=_ul_images;
return _div;
}

function insert(_Element){
document.getElementsByTagName("body")[0].appendChild(_Element);
}

var _target=document.getElementById("popup_window");
function _set(){
insert(createWindow());
removeEventListener("load",_set,false);
}
addEventListener("load",_set,false);

_target.addEventListener("click",/*#popupをdisplay : block;にする処理*/,false)
}());

処理の流れがとりあえず伝わればいいのですがこれはjsでポップアップするdivなどの要素を作り、あとはそれをbodyに追加し、clickによってポップアップの表示、非表示を行うというコードをかなり大雑把に(大切な細かな部分を省いて)書いた疑似的なコードです。
(もちろん動作しませんし様々な点に対して配慮のかけらもありません)
これに加えてポップアップしたウィンドウの画像にサイト本体(コンテンツ)に画像を表示する処理を記述すれば目的の動作になるでしょう。

しかしながら以下の方針の方が希望に向いているかと。
以下はHTML側にポップアップウィンドウ部などをあらかじめ作っておき、jsでそれを操作する考え方です。

HTML側にポップアップウィンドウとなる部分を構成(idなどを付けておき)、js側からdisplay : none;で非表示にする。
同時に画像を表示する場所を用意しておき、表示したい画像をここに入れて非表示にしておく(もしくは表示したい場所にidを振っておき、js側から画像を挿入する処理を用意しておく)。
(ポップアップウィンドウにあるサムネイル画像には非表示にしている画像を表示する処理か、画像を指定した場所へ挿入する処理を仕込んでおく)
ボタンにポップアップウィンドウ部を表示する処理を仕込んでおく。
ポップアップウィンドウ自体には非表示する機構を用意しておく。

以上が恐らく要件定義です。参考になれば。

Answer 2

jQueryできる方でしたらこのサイトを試してみてはいかがでしょうか。

《jQuery》子ウィンドウから親ウィンドウを操作
http://colorful-tips.net/jquery-1-2