ポロライド写真をばら撒いたように表示するギャラリーJavaScript「Polaroid Photo Viewer」
ポラロイド風に画像を見せると、写真自体を引き立てられます。
Polaroid Photo ViewerではjQueryを使用し、簡単にポラロイド風の写真をばら撒いたように表示することが可能です。
使用方法
Polaroid Photo Viewerからファイルをダウンロードします。
このファイルではgoogleからjQueryを読み込んでいるので、簡単に使用可能です。
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="script.js"></script>
あとは画像を記述すれば完成です。
<div class="polaroid">
<img src="画像パス" />
<p>キャプション</p>
</div>
//以下画像分
なお、CSS3に対応しているブラウザでは画像自体が傾いて表現されます。
また、既存サイトでは、jQueryを普通に読み込んでいるから、わざわざgoogleを利用したくないと言う人は以下のようにします。
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<script type="text/javascript" src="polaroid.js"></script>
jQueryからjquery.js、jquery.ui.jsをダウンロードするほか、script.jsを書き換えます。
こちらから見られます → polaroid.js
ポロライド写真をばら撒いたように表示するギャラリーJavaScript「Polaroid Photo Viewer」サンプル
コメントする
記事作成：2009年3月20日 14:01
