A day in the life

OC DESIGN FACTURE

Instant.js

2009,04,07, Tuesday | カテゴリー:サイトメモ | comments (2)

ブログに貼付けている写真を簡単にポラロイド風に変えることができる
Instant.js というスクリプトがありました。

shippoHANA chan

導入はとても簡単。ダウンロードしたファイルを解凍してできた「instant」フォルダをサーバーにアップ。(フォルダの中にはスクリプトの他に説明用のファイルがいくつかあります。削除してもかまいませんが、軽いし後で参照することもあるのでそのままアップ。)

スキンHTMLの<head>内に次の2行を書き加える。
<script type="text/javascript" src="instant/cvi_text_lib.js"></script>
<script type="text/javascript" src="instant/instant.js"></script>
※index.phpと同じ階層に「instant」フォルダを置いた場合。
これで準備はおわり。あとは変換したい画像の img 要素に class = "instant" とクラス属性を付けるだけ。他にクラス属性をスペースで区切って付け加えることで色々カスタマイズもできます。上の見本は左から

●class = "instant" (デフォルト)
●class = "instant itiltleft icolorf5f5dc"
(itiltleft は左振り、振りなしは itiltnone。icolor の後にカラーコードをつけると枠の色を変更できます)
●class = "instant nocorner icolorf5f5dc"
(nocorner で角丸に)
●class = "instant itiltleft icolorFFFCE9 ishadow80"
(ishadow は影の濃度 0から100の間で指定できる)
●class = "instant icolorFFFCE9 itxtalt"
(itxtalt を付けると alt 属性に入れた文字が写真下に表示されます。itxttitle 属性で title 属性の文字を表示することもできます。残念ながら英文のみ対応)
●class = "instant icolorFFFCE9 historical itiltleft itxtalt itxtcol800000"
(historical を付けると枠のフチがギザギザに。itxtcol のカラーコードを付けて文字の色を変更)

対応ブラウザは Firefox 1.5+, Opera 9+, Safari , IE6+ , iPhone でもきっちり表示されました。

写真をポラロイド風に変換するソフトには POLADROID という有名なものやiPhoneのアプリにもありますが、Instant.js はすでにアップしている写真を手軽に変換できる点がいいですね。

平均評価: (3人)

このカテゴリの最新記事

コメント

| yossy | EMAIL | URL | 2009/04/09 06:33 PM | rkI7KANY |

撮る人の腕があると味があって華やかで良いですね。
被写体のhanaちゃんも素晴らしい!
いい眺めです^^v


| oct | EMAIL | URL | 2009/04/10 09:52 AM | yucum13k |

>yossyさん
ありがとうございます。技術より感性なんですかねぇv(。-_-。)
それはさておき、様々なものを組み込んでるとブログンのアップデートには気が重いです...(´∀`


コメントする











← ど田舎の住宅街で道に迷う...

ハナアブ →