古籏一浩のJavaScriptラボ ― 第21回

飛び出すカルーセルをUIZE Frameworkで作る（後編）

2009年11月25日 13時01分更新

文● 古籏一浩

※この記事は「古籏一浩のJavaScriptラボ」の第21回です。過去の記事も合わせてご覧ください。

（前編からの続き）

複数の画像を並べたカルーセルを作る

　複数の画像を並べて表示するカルーセルを作成しましょう。はじめに、CSSを用意します。ここでは水平方向（横向き）用として以下のようなCSSを定義し、「carousel.css」ファイルとして保存します。垂直方向（縦向き）のカルーセルを作成したい場合は、UIZE FrameworkのデモページにあるサンプルのCSSをコピーしてください。


        /*** styles for thumbnails ***/
            a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:hover, a.thumbnail:active  {
                border:none;
            }
            a.thumbnail img, a.thumbnail:link img, a.thumbnail:visited img {
                background:#fff;
                border:1px solid #aaa;
                opacity:.90;
                width:105px;
                height:75px;
                padding:0;
                margin:2px;
            }
            a.thumbnail:hover img, a.thumbnail:active img {
                border:1px solid #ccc;
                opacity:1;
            }
        /*** scrolly styles ***/
            .scrollyView {
                overflow:hidden;
                border:1px solid #555;
                background:#000;
            }
            .scrollyButton, .scrollyButton:link, .scrollyButton:visited, .scrollyButton:hover, .scrollyButton:active {
                margin:0;
                padding:0;
                position:relative;
            }
            .scrollyButton .arrow {
                position:absolute;
                left:0;
                top:0;
                width:100%;
                height:100%;
                background-repeat:no-repeat;
                background-position:center center;
                opacity:.7;
                filter:alpha(opacity=70);
            }
            .buttonOver .arrow {
                opacity:.85;
                filter:alpha(opacity=85);
            }
            .buttonActive .arrow {
                opacity:1;
                filter:alpha(opacity=100);
            }
            .buttonGrayed .arrow {
                opacity:.3;
                filter:alpha(opacity=30);
            }
            /*** horizontal scrolly ***/
                .scrollyHorz .scrollyView {
                    float:left;
                    width:444px;
                    height:85px;
                    border-left:none;
                    border-right:none;
                    white-space:nowrap;
                }
                .scrollyHorz .scrollyView a img {
                    margin-top:4px;
                    margin-bottom:4px;
                }
                .scrollyHorz .scrollyButton {
                    width:18px;
                    height:85px;
                    float:left;
                }
                .scrollyHorz .scrollyButton .arrowLeft {
                    background-image:url(images/arrow-lightgray-left.gif);
                }
                .scrollyHorz .scrollyButton .arrowRight {
                    background-image:url(images/arrow-lightgray-right.gif);
                }

　使用するUIZE Frameworkのモジュールは先ほどと同じで以下の2つです。

Uize.Widget.Page
Uize.Widget.Scrolly

　カルーセルを処理するスクリプトも変わらず、以下の3行です。


var page = window.page = new Uize.Widget.Page();
page.addChild('horzScrolly',Uize.Widget.Scrolly);
page.wireUi();

　HTMLは以下の形式に従って記述します。スクリプト部分は前回のカルーセルと同じでしたので、違いといえばこのHTML部分ぐらいです。


        <div class="scrollyHorz">
            <a id="page_horzScrolly_left" href="#" class="scrollyButton button">
                <div class="arrowLeft arrow"></div>
            </a>
            <div id="page_horzScrolly-view" class="scrollyView">
                <a href="【実画像のURL】" class="thumbnail"><img src="【サムネイル画像のURL】"></a>
                            ：
            </div>
            <a id="page_horzScrolly_right" href="#" class="scrollyButton button">
                <div class="arrowRight arrow"></div>
            </a>
        </div>

　それぞれのID名はあらかじめ決まっているため、変更すると動作しません（変更できない）。また、Internet Explorer 6（IE6）ではナビゲーションボタンの表示位置がマウスオーバー時にずれてしまう問題があります。動作には影響ありませんが、どうしても気になる場合はimgタグを使ってボタンを表示し、別途処理を追加することで回避できます（IE7以降では正しく表示されます）。


サンプル3の実行結果。一度の4枚の画像が表示され、スクロールで切り換わる

●サンプル3


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>UIZE カルーセルサンプル</title>
        <link rel="stylesheet" href="css/page.content.css">
        <link rel="stylesheet" href="css/widget.slideshow.css">
        <link rel="stylesheet" href="css/carousel.css">
    </head>
    <body>
        <script type="text/javascript" src="js/Uize.js"></script>
        <div class="scrollyHorz">
            <a id="page_horzScrolly_left" href="#" class="scrollyButton button">
                <div class="arrowLeft arrow"></div>
            </a>
            <div id="page_horzScrolly-view" class="scrollyView"><!--
                --><a href="photo/1.jpg" class="thumbnail"><img src="thumb/1.jpg" title="松本城" alt=""></a><!--
                --><a href="photo/2.jpg" class="thumbnail"><img src="thumb/2.jpg" title="浅間山" alt=""></a><!--
                --><a href="photo/3.jpg" class="thumbnail"><img src="thumb/3.jpg" title="高ボッチ高原" alt=""></a><!--
                --><a href="photo/4.jpg" class="thumbnail"><img src="thumb/4.jpg" title="三九郎（どんど焼き）" alt=""></a><!--
                --><a href="photo/5.jpg" class="thumbnail"><img src="thumb/5.jpg" title="冬景色" alt=""></a><!--
                --><a href="photo/6.jpg" class="thumbnail"><img src="thumb/6.jpg" title="浅間温泉街" alt=""></a><!--
                --><a href="photo/7.jpg" class="thumbnail"><img src="thumb/7.jpg" title="鉢伏山" alt=""></a><!--
                --><a href="photo/8.jpg" class="thumbnail"><img src="thumb/8.jpg" title="美鈴湖" alt=""></a><!--
                --><a href="photo/9.jpg" class="thumbnail"><img src="thumb/9.jpg" title="諏訪湖と富士山" alt=""></a><!--
                --><a href="photo/10.jpg" class="thumbnail"><img src="thumb/10.jpg" title="紫陽花" alt=""></a><!--
                --><a href="photo/11.jpg" class="thumbnail"><img src="thumb/11.jpg" title="向日葵" alt=""></a><!--
            --></div>
            <a id="page_horzScrolly_right" href="#" class="scrollyButton button">
                <div class="arrowRight arrow"></div>
            </a>
        </div>
        <script type="text/javascript"><!--
            Uize.module ({
                required:[
                    'Uize.Widget.Page',
                    'Uize.Widget.Scrolly'
                ],
                builder:function () {
                    var page = window.page = new Uize.Widget.Page();
                    page.addChild ('horzScrolly',Uize.Widget.Scrolly);
                    page.wireUi();
                }
            });
        // --></script>
    </body>
</html>