SQLの窓

2014年09月25日


Picasa を使った、一枚の画像でサムネイルも兼ねる画像ウインドウの表示コード

Google+ の画像も利用できます。( w958-h766-no を w958 でもいいし、s900 でも動作します )

Picasa では、URL 内のフォルダ名でサイズを決定できるので、クリックするまでは実際に小さい画像を使いながら、その URL をそのまま使って大きい画像をウインドウで表示できます。
( 中央表示 )

元々、s150 の画像を s900 に変更しています。s の場合は、長いほうのサイズなので、この場合は横長の画像用になります。( 縦長の画像の場合は、s900 が縦のサイズです )

w=900 では、実際の大きい画像サイズです。画像のオリジナルサイズ以下(この場合横のサイズ)である必要があります。縦のサイズは、横のサイズが 900 の場合の 縦のサイズをセットしています。

表示位置は、計算して中央に表示するようにしています。
<img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/S7p-TD-MTcI/AAAAAAAAASc/S9yjZQj2u1s/s150/b17geoff_vane028.jpg"
	onclick='var w=900,h=680;window.open(this.src.replace(/s150/,"s"+w),"","width="+w+",height="+h+",resizable=1,left="+(screen.width-w)/2+",top="+(screen.height-(h+100))/2)'
	style='cursor:pointer'
>

関連する記事

Picasa のサムネイルの使い方


posted by lightbox at 2014-09-25 14:54 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする
container 終わり

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

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