Posted on November 5, 2006 at 7:41 pm

Javascript+CSSでスライドショーを作ってみる

エフェクト付のスライドショー

写真を魅せる方法のひとつにスライドショーがあると思います。
今日はdel.icio.us経由で面白そうなスライドショーのライブラリをみつけました。

  • CSS Photo Shuffler by Carl Camera : Demonstration Site

    • 画像をフェードインで次々表示してくれるのですがFlashではなくJavascript+CSSのみだそうです。
    とってもステキ。

    試しにサンプルページを作ってみました。

  • CSS Photo Shuffleのサンプルページ

    • 導入方法

    1.)ライブラリのダウンロード
    CSS Photo Shufflerの「source file」からzipファイルをダウンロードして解凍

    2.)XHTML
    スライドショーを表示したい部分

    PLAIN TEXT
    HTML:
    1. <div id=“photodiv”>
    2. <img id=“photoimg” src=“1枚目の画像へのパス” />
    3. </div>

    3.)CSS
    <head>～</head>内または外部のCSSに追記

    PLAIN TEXT
    CSS:
    1. #photodiv {
    2.   background-repeat: no-repeat;
    3. }

    4.)Javascript
    <head>～</head>内に追記

    PLAIN TEXT
    JavaScript:
    1. <script type=“text/javascript” src=“photoshuffler.jsへのパス”></script>

    5.)Javascriptのカスタマイズ
    2枚目以降の画像のパスを書き換えます。
    29行目以降

    PLAIN TEXT
    JavaScript:
    1. var gblImg = new Array(
    2.     “2枚目の画像へのパス”,
    3.     “3枚目の画像へのパス”,
    4.     “4枚目の画像へのパス”
    5.     );

    この他にも画像の停止時間・フェードインする時間・ローテーション回数なども設定できますがとりあえずこれだけで動くはずです。

    写真を1枚1枚をじっくり見せるのには向きませんがサイトのTOPページやヘッダーなどに使うといい雰囲気を醸し出せるかもしれません。

    Tags: , , ,

    Leave a Reply