写真をポップアップで拡大表示したい

締切済

質問者：bellettGTR
質問日時：2012/05/18 14:41
回答数：4件

複数写真のサムネイルがある画面で、

サムネイルをクリックした時に
「閉じる」ボタンがついた
ポップアップ画面で表示させたいのですが。

ポップアップ画面のサイズは、固定なので
ポップアップ画面のhtmlは、ひとつで
元のサムネイルによって、
表示する写真を変えたいのですが。

外部ファイルで処理をしたいのですが。

できるんでしょうか？
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： Tarepanda_club
回答日時：2012/05/24 16:12

たびたび失礼します。

遅くなってごめんなさい。

こちらこそ説明不足で混乱させてごめんなさい。
私の会社の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)+">");　
です)
悩ませてしまってほんとうにごめんなさい！！！多分動くと思います。

- 0
- 件

通報する

この回答へのお礼

何度も、ご解答下さってありがとうございました。

ご指摘下さったエスケープ文字と、
「"resizable=1,width=800,height=700"」
ここの部分の括弧を上記のようにしたら
思っていたことが実現できました。

思っていた通りのことができて
とても嬉しいです。

ありがとうございました。

通報する

お礼日時：2012/05/25 09:46

No.3

回答者： fujillin
回答日時：2012/05/21 15:58

別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_pl …

- 0
- 件

通報する

この回答へのお礼

この様なやつができるといいのですが
私には、少し難しかったです。
ありがとうございました。
<m(__)m>

通報する

お礼日時：2012/05/23 10:35

No.2

回答者： Tarepanda_club
回答日時：2012/05/18 16:23

再度すみません。

追加です。

'111.jpg'はhtmlと画像ファイルが同じフォルダ内にある場合なので、適宜'../img/111.jpg'(ひとつ上の階層のimgフォルダの中の111.jpgをさします)などと読み替えてくださればありがたいです。

この回答への補足

説明不足で、すみません。
HTMLを作成しています。

記入して頂いたのをコピーして
jsの部分は、コメント部分以外を
jsファイルとして
htmlは、写真のパスを変えてやってみたんですが
うまくいきませんでした。
htmlの方に、jsをインクルードする処理は記載してあります。

htmlに記載する画像ファイルの階層は
htmlからのものなのかJSファイルからのものなのでしょうか？

少し調べてみたんですが、
「href」とか、「void(0)」とかは要らないのでしょうか？

すみません。よろしくお願いします。

補足日時：2012/05/21 11:06

通報する

- 0
- 件

通報する

No.1

回答者： Tarepanda_club
回答日時：2012/05/18 16:16

はじめまして。

HTMLを作成しておられると思っていいですか？

javascript使われてはどうでしょうか。

<script language="JavaScript">

</script>

とfunctionを書いておき、<body>内の画像の<img>の前後に
<a onClick=backopen('111.jpg')><img src=111_s.jpg　…></a>

とすれば、できると思います。
ポップアップ用のHTMLは不要です。

600,900はウィンドウサイズでbellettGTRさんの任意の数値で、
111.jpg(ポップアップ用),111_s.jpg(サムネイル用)はそれぞれの画像のファイル名を入れてください。

ご期待に添えるでしょうか？いちど試してみてください。