iTunes風のイメージギャラリーが作れるJavaScriptライブラリー「ContentFlow」

マウスウィール(トラックパッド)でスクロールすると前後の画像が見れるギャラリー。一目見て「おっ、iTunesだ!」と思いました!JavaScriptとCSSをカスタマイズすればサイトにあった表現の仕方ができます。デフォルトでも充分かっこいいので「JavaScriptはよくわからない..」という人でも簡単に実装できると思います!


サンプルを用意したので見てみてください。

See the Pen Photo Gallery – ContentFlow by Mana (@manabox) on CodePen.

ダウンロードする

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と併用するとより動きがでて楽しめると思います!

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)