画像をポラロイド風にするJavaScript「jPolaroid」

画像を加工し、ポラロイド風に見せるサイトがあります。
手間をかけずにこれを実現できるjPolaroidを紹介します。

使用方法

jPolaroidからファイル一式をダウロードします。


<link rel="stylesheet" href="jpolaroid.css" type="text/css">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jpolaroid.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#id名').polaroid(); 
});
</script>

上記を記述したら画像に指定したid名を付与します。
<img id="id名" src="画像パス" /> またオプションとして以下のようなものがあります。


$(document).ready(function(){ 
    $('#id名').polaroid({ 
        tape:true, //テープをつけるか。（true/false）
        shadowPos: "top-left", //影の場所（top-left/top-right/bottom-left/bottom-right）
        bottom: "50px", //下の余白
        top: "22px",  //上の余白
        left: "24px",  //左の余白
        right: "24px",  //右の余白
        shadowColor: "#CCCCCC",  //影の色
        backgroundColor: "#FDFDFD" //背景の色
    }); 
});

サンプル

元画像

Javascriptサンプルページ一覧

skuare.net