カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」

appleが採用して一気にメジャー化したカバーフロー
随所で使用されるのが目に付きますが、今回紹介するProtoFlowでもprototype.jsとscriptaculous.jsを利用することで、簡単に導入可能です。
カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」サンプル

使用方法 ProtoFlowからファイル一式をダウンロードします。
次にhead内に以下のように記述します。
<script src="http://yourdomain/prototype.js" type="text/javascript"></script>
<script src="http://yourdomain/scriptaculous.js" type="text/javascript"></script>
<script src="http://yourdomain/reflection.js" type="text/javascript"></script>
<script src="http://yourdomain/protoFlow.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/protoFlow.css" type="text/css">
<script type="text/javascript">
Event.observe(window, 'load', function(evnt)
{
var ProtFlowExample = new ProtoFlow($("id名"), {
startIndex: 2, //開始点の画像
slider: true, //スライダー表示(falseで非表示)
captions: true, //キャプション表示
useReflection: true, //リフレクション表示
enableOnClickScroll: true //クリック時にスクロール
});
});
</script>

あとは、下記の通り画像をくくり終了です。
<div id="id名">
<a href="リンク"><img src="画像パス" alt="キャプション"></a>
画像枚数文
</div>

カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」サンプル

sponsors

「カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」」をシェアする

記事作成:
記事URL:

TOP > > > カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」