- 締切済み
写真をポップアップで拡大表示したい
複数写真のサムネイルがある画面で、 サムネイルをクリックした時に 「閉じる」ボタンがついた ポップアップ画面で表示させたいのですが。 ポップアップ画面のサイズは、固定なので ポップアップ画面のhtmlは、ひとつで 元のサムネイルによって、 表示する写真を変えたいのですが。 外部ファイルで処理をしたいのですが。 できるんでしょうか？ よろしくお願いします。
- bellettGTR
- お礼率66% (4/6)
- その他（プログラミング・開発）
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- Tarepanda_club
- ベストアンサー率72% (16/22)
たびたび失礼します。遅くなってごめんなさい。 こちらこそ説明不足で混乱させてごめんなさい。 私の会社のHPはこれで(もう少し複雑な形ですが)働いてくれているので、私の記載が違っていただけだと思います。 IE7-IE9とFirefox12とChrome19で動作確認しました。 ＞htmlに記載する画像ファイルの階層は ＞htmlからのものなのかJSファイルからのものなのでしょうか？ htmlフォルダからの階層です。 ＞少し調べてみたんですが、 ＞「href」とか、「void(0)」とかは要らないのでしょうか？ いらないです。ブラウザによって親と同じURLだったりblankだったりしますが。 ブラウザの新規ウィンドウをひらく。newpop=window.open("","newwin",'resizable=1,width='600',height='900'); そこにhtmlタグを書き込む。newpop.document.write("<html><body>");以下です。 ----- てここまで書いて気づきました。 newpop.document.write("<img src="+img+" height=\"900\">"); エスケープ文字の\が抜けていました！！！ごめんなさいっっ 言い訳するとうちでは画像サイズに比例させているのでここに変数いれていました。 (てか具体的には newpop.document.write("<img src="+img+" height="+(h0*0.85)+">"); です) 悩ませてしまってほんとうにごめんなさい！！！多分動くと思います。
- fujillin
- ベストアンサー率61% (1594/2576)
別htmlでの表示ではありませんが、lightboxなどのライブラリを利用するという選択肢はないのでしょうか？ lightbox http://lokeshdhakar.com/projects/lightbox2/ highslide http://highslide.com/ fancybox http://fancybox.net/ colorbox http://www.jacklmoore.com/colorbox ほかにも同様のものがいろいろあります。 http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery
お礼
この様なやつができるといいのですが 私には、少し難しかったです。 ありがとうございました。 <m(__)m>
- Tarepanda_club
- ベストアンサー率72% (16/22)
再度すみません。追加です。 '111.jpg'はhtmlと画像ファイルが同じフォルダ内にある場合なので、適宜'../img/111.jpg'(ひとつ上の階層のimgフォルダの中の111.jpgをさします)などと読み替えてくださればありがたいです。
補足
説明不足で、すみません。 HTMLを作成しています。 記入して頂いたのをコピーして jsの部分は、コメント部分以外を jsファイルとして htmlは、写真のパスを変えてやってみたんですが うまくいきませんでした。 htmlの方に、jsをインクルードする処理は記載してあります。 htmlに記載する画像ファイルの階層は htmlからのものなのかJSファイルからのものなのでしょうか？ 少し調べてみたんですが、 「href」とか、「void(0)」とかは要らないのでしょうか？ すみません。よろしくお願いします。
- Tarepanda_club
- ベストアンサー率72% (16/22)
はじめまして。 HTMLを作成しておられると思っていいですか？ javascript使われてはどうでしょうか。 <script language="JavaScript"> <!-- var newpop,winp function backopen (img) { if (winp=="on") { if (newpop.closed) {} else {newpop.close();} } //ここで開いていたら前のウィンドウを閉じる newpop=window.open("","newwin",'resizable=1,width='600',height='900'); newpop.document.write("<html><body>"); newpop.document.write("<img src="+img+" height="900">"); //画像 newpop.document.write("<input type=button value=close onClick=\"window.close();\">"); //これがCLOSEボタン newpop.document.writeln("</body></html>"); } // --> </script> とfunctionを書いておき、<body>内の画像の<img>の前後に <a onClick=backopen('111.jpg')><img src=111_s.jpg …></a> とすれば、できると思います。 ポップアップ用のHTMLは不要です。 600,900はウィンドウサイズでbellettGTRさんの任意の数値で、 111.jpg(ポップアップ用),111_s.jpg(サムネイル用)はそれぞれの画像のファイル名を入れてください。 ご期待に添えるでしょうか？いちど試してみてください。
お礼
ありがとうございます。 早速、試させて頂きます。 詳細な、コードをご記入頂き ありがとうございました。 <m(__)m>
お礼
何度も、ご解答下さってありがとうございました。 ご指摘下さったエスケープ文字と、 「"resizable=1,width=800,height=700"」 ここの部分の括弧を上記のようにしたら 思っていたことが実現できました。 思っていた通りのことができて とても嬉しいです。 ありがとうございました。