自動的にポラロイド写真風に加工する/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<script type="text/javascript" src="cvi_text_lib.js"></script>
<script type="text/javascript" src="instant.js"></script>
<style type="text/css">
body { background:silver; color: black; font-family: Georgia,serif; line-height: 1.5; margin: 2em 2em;}
</style>
</head>

<body>
<img class="instant ishadow40 itiltnone icolorFFFCE9 historical" src="images/1.jpg" width="400" height="375" border="0" />

<img class="instant nocorner itiltright itxtalt" src="images/1.jpg" width="200" height="187" border="0" alt="title" />

<img class="instant itxtalt itxtcol003399" src="images/1.jpg" width="120" height="120" border="0" />

<img class="instant" src="images/2.jpg" width="300" height="202" border="0" alt="" />

</body>
</html>

	Instant.js 2.21

画像を自動的にポラロイド写真風に加工してくれる instant.js。
実装方法は簡単で、スクリプトを読み込んで適用したい画像にクラスをつけるだけです。
このクラスを複数適用することによって、画像のコーナーを丸くしたり、キャプションつけたり、ドロップシャドウ付けたりできます。

セッティング

１．ダウンロード/セッティング

サイトへ行き instant.zip をダウンロードしてください。
それを解凍したら、instant.js と cvi_instant_lib.js をアップロードします。

２．<head>設定

アップしたスクリプトを読み込ませます。

順番はどちらが先でもOKみたいですが、パスに注意して記述してください。

３．HTMLマークアップ

このスクリプトは以下のように img要素にクラスを付けて適用させます。

これが基本的な形です。
そして細かく調整した場合は、以下のクラスを instant の後に追加していきます。

ishadow40　…　ドロップシャドウ。数値は濃さのパーセンテージ。

itiltnone …　画像を傾かせない。

itiltleft …　画像を左へ傾かせる。

itiltright …　画像を右へ傾かせる。

icolorFFFCE9　…　icolorの後にカラーコードを記述。枠の色。

historical …　淵が古めいた感じになる。

itxtalt …　alt属性をキャプション表示。

例えばドロップシャドウをもっと濃くしたい場合は、

このようにクラスを追加すればOKです。