iTunes風のイメージギャラリーが作れるJavaScriptライブラリー「ContentFlow」
マウスウィール（トラックパッド）でスクロールすると前後の画像が見れるギャラリー。一目見て「おっ、iTunesだ！」と思いました！JavaScriptとCSSをカスタマイズすればサイトにあった表現の仕方ができます。デフォルトでも充分かっこいいので「JavaScriptはよくわからない..」という人でも簡単に実装できると思います！
サンプルを用意したので覗いてみてください。
ダウンロードする
ContentFlowのサイトからファイル一式をダウンロードします
コーディング
外部ファイル
<head>内にダウンロードしたファイルを読み込ませます
<script language="JavaScript" type="text/javascript" src="/sample/js/contentflow.js"></script> <link rel="stylesheet" href="/sample/css/contentflow.css" type="text/css" media="screen" />
JavaScript
オプションはここに追加していきます。デフォルトでも充分かっこいいです！
var cf = new ContentFlow('contentFlow', {reflectionColor: "#000000"});
HTML
<div class="loadIndicator"><div class="indicator"></div></div>の中にはギャラリーを読み込むまでのローディング画面が表示されます。<div class="item">の中に画像とキャプションを入れて表示させたいだけ追加していきましょう。
<div id="contentFlow" class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
<div class="item">
<img class="content" src="/sample/images/contentflow1.jpg"/>
<div class="caption">かわいいお花</div>
</div>
<div class="item">
<img class="content" src="/sample/images/contentflow2.jpg"/>
<div class="caption">チョコレートケーキ</div>
</div>
・
・
・
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider"><div class="position"></div></div>
</div>
</div>
Lightboxと併用するとより動きがでて楽しめると思います！
Pingback: 徒然 - 【PV】Rie a.k.a. Suzaku / Time Paradox そして iTunes風スライドショー