JavaScriptで画像サイズと合ったポップアップウィンドウを開く

このQ&Aのポイント
  • JavaScriptを使用して、画像サイズに合わせたポップアップウィンドウを開く方法について検討しています。
  • 複数の画像があり、サイズもバラバラなので、一つ一つの画像にサイズ指定するのは大変です。
  • IE7ではポップアップ画像が画面一杯に表示されてしまい、firefoxでは読み込みが終わらない問題があります。改善策を教えてください。
回答を見る
  • ベストアンサー

JavaScriptで画像サイズと合ったポップアップウィンドウを開く

いつもお世話になっています。 題名のとおりですが、サムネイルをクリック→オリジナル画像を画像サイズでポップアップしたいと考えています。 画像の数も多く、サイズもバラバラのため、window.openで一つ一つサイズ指定するのは大変だな~と考えていたところ、 http://creazy.net/2006/12/javascript.html にて、すばらしい方法を紹介していました。 早速、上記をテストしてみたのですが、2点気になる部分があります。   ・IE7にてポップアップ画像が画面一杯に表示されてしまう。   ・firefoxだとポップアップウィンドウの表示に問題はないが、読み込みが終わらない。 この改善策はあるのでしょうか? ポップアップウィンドウが画像サイズで開けば、まったく別の方法でも構いません。 宜しくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.1

こんにちは IE7は持っていないので推測でしかないですけど以前IE7はタブ型だと目にしたことがあるような気がします(違ってたらすみません) ブラウザの設定で『新しいタブで開く』や『常に最大化して表示』などの設定になっていませんか? Operaでもそうなのですがそのような設定にしてあるとopen.windowにサイズ指定しても画面一杯に表示されます(><) firefoxの方は pop_win.window.document.write(  ); の前後に pop_win.window.document.open(); (←前) pop_win.window.document.close(); (←後) を付け加えればO.K.だと思います あとpadingではなくpaddingです(><) ポップアップウィンドウではありませんがHislideやLightboxやThickbox、Prototype JavaScript Windowsなどの方法もあります http://youmos.com/news/highslide_js http://serennz.sakura.ne.jp/toybox/lightbox/?ja http://kishi-r.com/jquery_sample/thickbox_image.php http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter83/001/sample1/index.html

sugi-ryo
質問者

お礼

ご回答ありがとうございます! 上記ためしたところ、firefox改善しました! IE7もタブ設定を変更したところ、タブではなく新しいウィンドウで開くようになりました。(ただ表示サイズがおかしいですが…) 教えていただいたリンク拝見しました。 特にhighslideって素敵ですね。 実装するのが大変そうですが、頑張ってみます。 今回はありがとうございました!

関連するQ&A

  • ポップアップウィンドウでswfをリピートしない

    リンク元ページから、ポップアップウィンドウが開きswfを表示します。 ポップアップウィンドウはJavaScriptでウィンドウサイズを指定して開きます。 <a href="#" onclick="window.open('swf/aaa.swf','popup1','width=400,height=300');">ポップアップ </a> ポップアップウィンドウで表示させるswfをリピートなしにしたいです。 よろしくお願いします。

  • javascriptでのポップアップ表示を一つにまとめるには?

    お世話になります。 現在javascriptを使用して、画像表示にポップアップを表示させる設定をしております。 (ポップアップ表示はクライアントの意向) そこで以下のソースで設定したのですが、一つポップアップを開き、 次に他のポップアップを開いた場合、ポップアップの数が増えてしまうものを 一つにまとめてもらえないかとの依頼がありました。 ----- <a href="javascript:w=window.open('hogehoge.html','','scrollbars=no,width=650,height=525');w.focus();"><img src="images/hogehoge.jpg" width="119" height="87" alt="ほげほげ"></a> ----- ブラウザ表示は、クライアント使用のsafari中心ですが IEやFirefoxでも確認をしております。 ただ、safariで動作が確認出来れば現状は結構です。 ご存知の方がおられましたら、是非ご教示くださいませ。 宜しくお願い致します。

  • ポップアップ画面のサイズに関して

    ポップアップ画面のサイズが小さい時、ユーザー側でサイズを常に大きくなるように設定することはできますか? どうも window:open という設定が JavaScript に書き込まれているようなので、見る側で設定することはできないのでしょうか?

  • 複数の画像からサイズを指定したウィンドウを開きたい

    JavaScriptの初心者です。 小さい画像を並べたサムネイルのようなページの各画像をクリックすると、詳細を表示するページにジャンプしたいです。このとき、サイズを指定した新しいウィンドウに表示させたいのですが、各画像ごとにジャンプ先のページが異なるため、それぞれにwindow.open();を書くのは面倒です。そこで、window.open();は一つで兼用し、リンク先がリンク元の画像ごとに違うようにするにはどのようなソースを書けばよいのでしょうか。

  • java scriptによるポップアップウインドウについて

    <head> <SCRIPT language="JavaScript"> <!-- function OpenWin1(){ win=window.open("window1.html","new","width=300,height=100"); } // --> <!-- function OpenWin2(){ win=window.open("window2.html","new","width=500,height=200"); } // --> </SCRIPT> </head> <body bgcolor="#FFFFFF" text="#000000"> <A href="javascript:OpenWin1()">1.ウィンドウを開く</A> <A href="javascript:OpenWin2()">2.ウィンドウを開く</A> </body> 「1.ウィンドウを開く」をクリックしてwindow1.htmlのポップアップウインドウを表示させたまま、「2.ウィンドウを開く」をクリックすると、最初のウインドウサイズを保持したまま、新しいウインドウが開いてしまうのですが、これをうまく処理する方法はないのでしょうか? どなたかアドバイス頂けると嬉しいです。 よろしくお願い致します。

  • ポップアップウィンドウでswfをリピートしない

    HTML のほうで質問させていただいたのですが、思った回答が得られなかったのでこちらで質問させていただきます。(場違いだったのかも・・) リンク元ページから、ポップアップウィンドウが開きswfを表示します。 ポップアップウィンドウはJavaScriptでウィンドウサイズを指定して開きます。 <a href="#" onclick="window.open('swf/aaa.swf','popup1','width=400,height=300');">ポップアップ </a> ポップアップウィンドウで表示させるswfをリピートなしにしたいです。 よろしくお願いします。 *swfはFlashではなく、mpegをコンバータにてswfにしたものです。

  • Javascript ポップアップウィンドウについて

    初歩的なことだとは思いますが、教えてください。 ポップアップウィンドウで画像を表示するためのリンクを以下のように記述して使っていますが、 ポップアップウィンドウ内に余白が出ます。(ウインドウ枠と画像の間) ウインドウの左上(0,0)の位置に画像を持ってくるにはどうしたらいいのでしょうか。 調べたものをいくつか試してみましたが、どれもうまくいきませんでした。 よろしくお願いします。 -------------------- ■<head>内 <script type="text/javascript"> <!-- function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </script> ■<body>内 <a href="img/test.gif"><img alt="" src="~.gif" onclick="MM_openBrWindow('img/test.gif','test','scrollbars=yes,width=950,height=400')" /> </a> ------------------------- もしくは、 ■<head>内 <script type="text/javascript"> <!-- function WindowOpen_01(){ window.open('test.gif','test','scrollbars=yes,width=1150,height=350,left=0,top=0'); } //--> </script> ■<body>内 <a href="javascript:WindowOpen_01()"><img src="img/table_off.gif" alt="" width="320" height="55" class="mar_t_10" onmouseover="this.src='img/table_ban_on.gif'" onmouseout="this.src='img/table_off.gif'" /></a>

  • ポップアップウインドウの高さがモニタサイズより大きい場合は?

    window.openで、ポップアップウインドウを出しているのですが、資料の拡大表示用なので、場合によっては、モニタの画面サイズよりデカイんです。 作っているMacでは、IEでもSafariでも自動的に、モニタサイズより小さいウインドウになるのですが、Windowsでは、スクロールバーがアクティブにならなかったり、ウィンドウの下部がタスクバーの下になってしまったり、IE、Netscape、Operaと試しましたが、うまくいきません。 みなさんは、どうやって回避してますでしょうか? window.openのheightって、どの高さなんでしょうか?

  • <script Language="JavaScript">を使わないで画像をクリックして別ウィンドウをポップアップさせる方法

    以下のソースを見てください <body> <a href="http://www.yahoo.co.jp/" onclick=" window.open('http://www.yahoo.co.jp/', '_blank', 'width=200,height=200'); return false;">開く</a> </body> この例のようにすると文字をクリックすると別ウィンドウで表示されますが、これの画像のやり方を教えてほしいのです。画像をクリックすると別ウインドウが開いて他のページを指定したサイズで表示させたいのです。 headタグの中に<script Language="JavaScript">~</script>を使う方法はわかるのですが、これを使わずに上の例のようにimgタグに埋め込んでポップアップさせる方法を教えてください。

  • ポップアップウィンドウがサイズが固定されているのは何故ですか?

    お世話になります。ポップアップのサイズ変更について質問させてください。ページ内にあくつも画像があり、クリックするとテーブルの各画像の詳細ページがポップアップページとして出てくるという動作を作ったのですが、このポップアップを最初は800px500pxで表すようにしたいのですが、閲覧者によってリサイズというかサイズを自由に変えることができるようにしたいのです。それで、下記のようにscrollbars=yes,resizable=yes,という記述をしたのですが、MacではsafariもIEも正常にリサイズできるのですが唯一Firefoxが正常に動かず、WinのIEではガッチリ固定されていてまったくスクロールができません。ブラウザによっては多少の違いはあると思うのですが、これはどうしてでしょうか?また、解決策はあるのでしょうか? どうかご教授ください。 function OPEN(lk){WIN=window.open(lk,'thank1','width=800,height=500')} 省略 <td valign="top" class="biyou">●A-1<a href="javascript:;" onClick="OPEN('001.html','scrollbars=yes,resizable=yes,width=600px,height=500px')"><img src="images/001.jpg" alt="適当な文章" width="203" height="140"></a></td>

    • ベストアンサー
    • HTML