それでは実際にInnerFadeを使ってみます。ここでは画像をphotoフォルダに、InnerFadeのスクリプトファイルをjsフォルダに入れてあります。

サンプルのファイル構成

InnerFadeはjQueryライブラリを使用しているので、以下のように先にjQueryを読み込ませた後に<script>タグを使ってjquery.innerfade.jsファイルを読み込ませます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>

必要であればスタイルシートファイルを<link>タグを使って読み込ませます。

(X)HTMLタグの設定

次にフェードさせたい(X)HTMLタグを指定します。これはjQueryの$()を使って対象となる(X)HTMLタグを指定します。特定しやすいようにID名をタグに割り当てておくのも1つの手です。あとはページが読み込まれた後に$(～).innerfade()と指定すれば終わりです。サンプル01では<ul><li>タグに記述された画像を繰り返しフェードさせ表示します。

サンプル01の実行結果。次々と画像がフェードし切り替わる

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>InnerFadeサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/main.css"> 
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.innerfade.js"></script>
        <script type="text/javascript"><!--
            $(function(){
                $("#album").innerfade();
            });
        // --></script>
    </head>
    <body>
    <h1>InnerFadeサンプル</h1>
        <ul id="album">
            <li><img src="photo/001.jpg" width="192" height="108" alt="富士山"></li>
            <li><img src="photo/002.jpg" width="192" height="108" alt="夕焼け"></li>
            <li><img src="photo/003.jpg" width="192" height="108" alt="富山湾"></li>
            <li><img src="photo/004.jpg" width="192" height="108" alt="白糸の滝"></li>
        </div>
    </body>
</html>