<< January 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>

画像のポップアップウィンドウ

この画像をクリックすると、原寸大の画像が別窓で表示されます。
…っていうのは、大抵のブログにある機能…かな?
(↑よく分かってないワタシ…(-"-;A ...アセアセ)
MTの場合、画像の別窓表示は画像の大きさに合わせてウインドウが自動で調節されるけど、ロリポブログはそうではないみたい。。。
なので、MTのポップアップ表示で使ってるタグをちょっと応用して、
こちらでも使えるようにしてみました。
CSSによっては表示が異なるけれど、なんとか成功 グッド

クリックしてみそ♪

こんな面倒なことするのはσ(-_-)ワタシくらいでしょう。。。
でもこちらの画像表示のほうがスマートで好きなんだよなぁしょんぼり



<a href="画像のURL" onclick="window.open('画像のURL','popup','width=画像の実際の横幅+20,height=画像の実際の縦幅+30,scrollbars=no,resizable=no,
toolbar=no,directories=no,location=no,
menubar=no,status=no,left=0,top=0'); return false"><img src="画像のURL" width="記事内に表示される画像の横幅(縮小比率は適宜で)" height="記事内に表示される画像の縦幅(縮小比率は適宜で)" border="0" alt="適宜"></a>


記事内に表示される画像が記事の幅より大きかったりすると
表示が凄〜く崩れるので注意〜(-ω-;)

上の画像の場合は上記のタグ全体をさらに<center>〜</center> で囲んで、画像を中央寄せにしてます。

画像の実際の横幅+20、画像の実際の縦幅+30
ウインドウの上部と左側に余白ができてしまうため、
画像が右側、下側にずれてしまう。そのため右端と上部の画像が
切れないようにするための余白分を足さなければならない。
上の画像の場合は実際の横幅480+20=「500」、
実際の縦幅360+30=「390」を入力。

left=0,top=0 は別ウインドウが表示される位置。適宜で調節。

画像に対して記事を回り込ませるようにするには<img〜> の中に、さらにalign属性を記述。

いちいちこのタグを入力するのは面倒だけど、
多分使うだろうなぁ〜汗
しかも、もっと手をかけてTABLEタグを
使っちゃったりなんかして(^▽^;)
.......((((((ノ゜゜)ノ アゥ
やはり、画像表示にココまで手間をかけるのは
ワタシくらいだわさ。。。(・ω・`)
* サイト関連(カスタマイズメモ) * comments(0) * trackbacks(0) *
   このページの先頭へ

コメント

コメントする









トラックバック