ショーケースのタブを日本語にする

Smooth Galleryでは画像の一覧を表示するショーケースのパネルタブの文字が英語になっています。デフォルトではPictureの文字が設定されています。パネルに表示される文字を設定するには．以下のようにtextShowCarouselプロパティに文字列を指定します(サンプル06)。

var myGallery = new gallery($("myGallery"), { 
    timed: false,
    textShowCarousel : "画像一覧"
});

サンプル06の実行結果

日本語で表示される

サンプル06

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/layout.css" type="text/css">
        <link rel="stylesheet" href="css/jd.gallery.css" type="text/css">
        <script type="text/javascript" src="js/mootools.js"></script>
        <script type="text/javascript" src="js/jd.gallery.js"></script>
        <script type="text/javascript"><!--
            function startGallery() {
                var myGallery = new gallery($("myGallery"), { 
                timed: false,
                textShowCarousel : "画像一覧"
                 });
            }
            window.onDomReady(startGallery);
        // --></script>
        <title>SmoothGalleryサンプル</title>
    </head>
    <body>
    <h1>SmoothGalleryサンプル</h1>
            <div id="myGallery">
                <div class="imageElement">
                    <h3>富士山</h3>
                    <p>日本の代表的な山です</p>
                    <a href="http://ja.wikipedia.org/wiki/富士山" title="詳細を表示" class="open"></a>
                    <img src="photo/001.jpg" class="full" />
                    <img src="thumb/001.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>夕焼け</h3>
                    <p>神社の夕焼けです</p>
                    <a href="http://ja.wikipedia.org/wiki/夕焼け" title="詳細を表示" class="open"></a>
                    <img src="photo/002.jpg" class="full" />
                    <img src="thumb/002.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>富山湾</h3>
                    <p>綺麗な富山湾です</p>
                    <a href="http://ja.wikipedia.org/wiki/富山湾" title="詳細を表示" class="open"></a>
                    <img src="photo/003.jpg" class="full" />
                    <img src="thumb/003.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>白糸の滝</h3>
                    <p>有名な白糸の滝です</p>
                    <a href="http://ja.wikipedia.org/wiki/白糸の滝" title="詳細を表示" class="open"></a>
                    <img src="photo/004.jpg" class="full" />
                    <img src="thumb/004.jpg" class="thumbnail" />
                </div>
            </div>
    </body>
</html>

textShowCarouselには文字だけでなく画像も指定することができます。以下のようにすると文字の代わりにsel.gif画像が表示されます。

textShowCarousel : "<img src='sel.gif'>"

textShowCarouselで指定できる文字列はHTML文字列であれば基本的に表示される仕組みになっています。

ブラウザや環境によっては日本語のキャプションの文字サイズが小さすぎて読めなかったり、逆に大きすぎて枠からはみ出してしまったりという場合があります。この場合には、特定のスタイルシートのクラスを設定します。キャプションの見出しは.jdGallery .slideInfoZone h2セレクタで、キャプション自体は.jdGallery .slideInfoZone pでスタイルシートを指定することができます。文字サイズを指定するスタイルシートはfont-sizeなので以下のようにするとキャプションの見出しが12pt、キャプション自体が9ptで表示されます(サンプル07)。

<style type="text/css"><!--
    .jdGallery .slideInfoZone h2 { font-size:12pt; }
    .jdGallery .slideInfoZone p { font-size:9pt; }
--></style>

サンプル07の実行結果

サンプル07

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/layout.css" type="text/css">
        <link rel="stylesheet" href="css/jd.gallery.css" type="text/css">
        <script type="text/javascript" src="js/mootools.js"></script>
        <script type="text/javascript" src="js/jd.gallery.js"></script>
        <script type="text/javascript"><!--
            function startGallery() {
                var myGallery = new gallery($("myGallery"), { 
                timed: false,
                textShowCarousel : "画像一覧"
                 });
            }
            window.onDomReady(startGallery);
        // --></script>
        <style type="text/css"><!--
        .jdGallery .slideInfoZone h2 { font-size:12pt; }
        .jdGallery .slideInfoZone p { font-size:9pt; }
        --></style>
        <title>SmoothGalleryサンプル</title>
    </head>
    <body>
    <h1>SmoothGalleryサンプル</h1>
            <div id="myGallery">
                <div class="imageElement">
                    <h3>富士山</h3>
                    <p>日本の代表的な山です</p>
                    <a href="http://ja.wikipedia.org/wiki/富士山" title="詳細を表示" class="open"></a>
                    <img src="photo/001.jpg" class="full" />
                    <img src="thumb/001.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>夕焼け</h3>
                    <p>神社の夕焼けです</p>
                    <a href="http://ja.wikipedia.org/wiki/夕焼け" title="詳細を表示" class="open"></a>
                    <img src="photo/002.jpg" class="full" />
                    <img src="thumb/002.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>富山湾</h3>
                    <p>綺麗な富山湾です</p>
                    <a href="http://ja.wikipedia.org/wiki/富山湾" title="詳細を表示" class="open"></a>
                    <img src="photo/003.jpg" class="full" />
                    <img src="thumb/003.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>白糸の滝</h3>
                    <p>有名な白糸の滝です</p>
                    <a href="http://ja.wikipedia.org/wiki/白糸の滝" title="詳細を表示" class="open"></a>
                    <img src="photo/004.jpg" class="full" />
                    <img src="thumb/004.jpg" class="thumbnail" />
                </div>
            </div>
    </body>
</html>