SQLの窓

2015年03月15日


画像を大きく見る為のウインドウを開くボタンの作成するサービス

▼ このページへのリンク


Lightbox や Shadowbox のような JavaScript ライブラリはとてもかっこよく表示できるのでとても自己満足はできるのですが、イザその画像の詳細を見たくて実際のサイズで見たいときにはあまり意味がなかったり。特に、イラストを作った直後で、ブログに貼り付けてから再度見直したい時にはなんか違うなぁ(画像小さいし)・・・・なんて思う事もあったので、単純に大きく開くボタンを作ってはみたのですが、結構コードが長くて使いまわしがつらかったので作りました。

『関数にすれば?』

という意見も頭の中には少しあったのですが、このほうがイラスト毎に後から開いたウインドウの背景をカスタマイズできるので、これでいいかなと思いました。

▼ 通常ボタン
 

上で開くイラストは、背景が透過しているのでこんなふうにカスタマイズできます。

▼ インラインに JavaScript で背景を追加したカスタマイズボタン
 

5行目が追加部分です
<input type="button" value="最大表示" onclick='
	var w=1000,h=860;
	hwin=window.open("about:blank","","width="+w+",height="+h+",scrollbars=yes,resizable=1,left="+(screen.width-w)/2+",top="+(screen.height-(h+100))/2);
	hwin.document.write("&lt;img src=&#92;&#34;https://lh6.googleusercontent.com/-	FQO8GbFoAUI/VQVVLysRSzI/AAAAAAAAY1g/trUU_gZMCkQ/s1200/Aiko6_maid.png&#92;&#34;&gt;");
	hwin.document.body.style.background="url(https://lh5.googleusercontent.com/-yzSGYSSjnFo/VP8HrL7VPLI/AAAAAAAAYts/r_GE5g8ee9s/s1200/marge_city_a01.png) no-repeat 0px 100px";
'> 



【WEBサービスの最新記事】
posted by lightbox at 2015-03-15 22:30 | WEBサービス | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり