FrogJSを使う

それでは実際にFrogJSを使ってみます。ここでは実画像をphotoフォルダに、サムネイル画像をthumbフォルダに入れてあります。

本稿の構成図

FrogJSはprototype.jsライブラリとscriptaculousライブラリを使用しています(*1)。これらのライブラリはFrogJSをダウンロードすると一式で入っていますので新たにダウンロードする必要はありません。FrogJSを使用する前には、これら2つのライブラリを以下のように順番に読み込ませる必要があります。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>

これら2つのライブラリを読み込ませたらFrogJSのスクリプトを読み込ませます。

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

FrogJSは特に専用のスタイルシートはありませんが、必ずID名FrogJSにはheightで高さを指定します。高さを指定しないとInternet Explorerでサムネイル表示の際に不具合が発生します。例えば高さを500pxにする場合は以下のように定義します。

#FrogJS {
    height : 500px;
}

サンプルではスタイルシートは別ファイルにして<link>タグを使い読み込んでいます。これでFrogJSを利用する準備が完了です。

それでは実際のHTMLコードを見ていきます。FrogJSはスライド表示する画像が含まれる領域を<div>タグまたは<p>タグで囲みます。<div>タグまたは<p>タグのID名は必ずFrogJSにします。<div>タグまたは<p>タグで囲まれた画像は実画像のURLを<a>タグのhref属性で指定し、サムネール画像を<img>タグで指定します。つまり以下のように<a>タグと<img>タグを記述します。

<a href="実画像のURL" title="作者名">
    <img src="サムネイルのURL" alt="キャプション">
</a>

キャプションはalt属性で指定します。作者名/クレジットはtitle属性で指定します。特にtitle属性は指定しなくても動作しますが、何も表示しない場合でもtitle=""としないとSafariではnullと表示されてしまうので注意が必要です。FrogJSは他のスライド表示ライブラリと異なり、特別なスタイルシートのクラスや、特殊な属性は指定する必要がありません。サムネイル画像クリックで実画像を表示する形式になっているページでは単純に<div id="FrogJS">～</div>または<p id="FrogJS">～</p>で囲むだけで済むという手軽さです。また、<a>タグがなく<img>タグだけの場合は、全く画像が表示されなくなる点には注意してください。あとは、表示したい画像の数だけ<a><img>タグを列記します。実際の例はサンプル01になります。

サンプル01の実行結果

左右のサムネイル画像をクリックすると

その画像が拡大表示され中央に移動する
*1FrogJSで使用しているprototype.jsのバージョンは1.5.0です。

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <title>FrogJSサンプル</title>
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript" src="js/effects.js"></script>
        <script type="text/javascript" src="js/frog.js"></script>
    </head>
    <body>
    <h1>FrogJSサンプル</h1>
        <div id="FrogJS">
            <a href="photo/001.jpg" title="">
                <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
            </a>
            <a href="photo/002.jpg" title="">
                <img src="thumb/002.jpg" width="96" height="54" alt="夕焼け">
            </a>
            <a href="photo/003.jpg" title="">
                <img src="thumb/003.jpg" width="96" height="54" alt="富山湾">
            </a>
            <a href="photo/004.jpg" title="">
                <img src="thumb/004.jpg" width="96" height="54" alt="白糸の滝">
            </a>
            <a href="photo/005.jpg" title="">
                <img src="thumb/005.jpg" width="96" height="54" alt="高原の朝">
            </a>
        </div>
    </body>
</html>