質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.03%

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

受付中

回答 2

投稿

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

ってことは javascript や CSS で出来ますか?
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/02 10:03

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

    そんな動きです

    キャンセル

  • 2015/02/02 11:25

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

    キャンセル

  • 2015/02/07 00:43

    以下一例としてまず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側から画像を挿入する処理を用意しておく)。
    (ポップアップウィンドウにあるサムネイル画像には非表示にしている画像を表示する処理か、画像を指定した場所へ挿入する処理を仕込んでおく)
    ボタンにポップアップウィンドウ部を表示する処理を仕込んでおく。
    ポップアップウィンドウ自体には非表示する機構を用意しておく。

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る