※この記事は「古籏一浩の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枚の画像が表示され、スクロールで切り換わる
<!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>
