[Slided.js]
http://www.netzgesta.de/slided/
画像を映写機のスライドのような枠で装飾するスクリプトです。
使い方は、Instant.jsやFilmed.jsとほぼ同じで、実装もオプションも非常に簡単です。
◆Slided.jsのHTMLへの設定
まずは、必要なファイルをダウンロードし、HTMLに設定します。
http://www.netzgesta.de/slided/のDownloadから
[slided.js 1.0]をダウンロードします。
（ダウンロードファイル名は[slided.zip]）
ファイルを展開すると、JavaScriptファイル、サンプルページなどがあります。
映写機風スライドの表示に必要となるのはJavaScriptファイルのみですので
[slided.js]を適当な場所に配置したら、HTMLファイルにJavaScriptの設定を行います。
<script type="text/javascript" src="ｘｘｘ/slided.js"></script>
これで、準備完了です。
（スクリプトファイルはけっこう重いです・・・。）
◆映写機風の装飾を表示
装飾を行いたいimgタグにclass="slided"と指定すればOKです。
今回はこちらの写真を使います。（季節はずれですが。）
<img src=".../images/xxxxx.jpg" alt="sample" class="slided"/>
◆オプションクラス
slidedと一緒にclassに指定することで、さまざまな効果を得られるクラスが準備されています。
【ishade】
映写機風スライドの周囲のぼかし具合を0～100の数値で指定します。
数値が大きいほどシャープに表示されます。
ただし、0を設定しても適用されません。デフォルトは50です。
[ishade5]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ishade5"/>
[ishade100]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ishade100"/>
【ishadow】
影の濃さを0～100の数値で指定します。デフォルトは40です。
数値が大きいほど影が濃くなります。
ただし、0を設定しても適用されません。
[ishadow10]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ishadow10"/>
[ishadow80]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ishadow80"/>
注）IEの場合、デフォルトフレーム色のままだと、影の効果がフレームに透過しています。
（デフォルトの表示のときに、IE以外の場合はフレームが白ですが、
IEの場合、影が透過してグレーに表示されます。）
ishadow100をフレーム色の指定無しで設定してしまうと、
IEで真っ黒のフレームが表示されてしまいますので、ご注意ください。
【noshadow】
影の効果を無しにします。
<img src=".../images/xxxxx.jpg" alt="sample" class="slided noshadow"/>
【nocircles】
四隅についている丸い飾りをなくします。
<img src=".../images/xxxxx.jpg" alt="sample" class="slided nocircles"/>
非常にシンプルな感じになりますね。
次回、色関連のオプションクラスを紹介します。