アニメーション付きで飛び出すカルーセルに
単純にカルーセルパネルを表示するだけではあまり面白くないので、今度は画像がクリックされたらアニメーション付きで拡大するように改造しましょう。拡大表示には以下の3つのモジュールを新たに読み込ませます。これまでに説明したようにモジュールの読み込みにはrequiredを使い、配列要素として3つのモジュール名を追加します。
- Uize.Widget.ThumbZoom
- Uize.Node
- Uize.Curve.Rubber
モジュールを設定したら以下のコードを追加します。サムネイル画像を拡大するウィジェットを利用すれば、画像のズーム表示を手軽に実装できます。
tagNameはズーム対象となるタグ名を指定します。今回の場合はaタグになります。ソースコードではAとなっていますが、大文字・小文字でもどちらを指定しても動作には影響ありません。classNameは指定したクラスだけを対象にします。つまり、aタグでthumnailクラスが指定されているものだけが対象になるわけです。
page.addChild (
'thumbZoom',
Uize.Widget.ThumbZoom, {
thumbNodes:{
tagName:'A',
className:'thumbnail'
},
imageValidator : null
}
);
実際のプログラムがサンプル4です。サムネイル画像をクリックすると画像が画面中央に拡大しながら表示され、しばらくすると拡大画像以外の要素がフェードアウトします。なお、ブラウザーの表示モードが互換モードになっていると、Firefoxなどの一部のブラウザーで画像が正しい位置に表示されない場合があります。HTML文書はHTML 4.0以上の標準モードか、もしくはXHTMLで記述してください。
サムネイル画像をクリックすると...
拡大画像が画面中央に拡大しながら表示される。しばらくすると拡大画像を残して黒にフェードアウトする
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<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',
'Uize.Widget.ThumbZoom',
'Uize.Node',
'Uize.Curve.Rubber'
],
builder:function () {
var page = window.page = new Uize.Widget.Page();
page.addChild ('horzScrolly',Uize.Widget.Scrolly);
page.addChild (
'thumbZoom',
Uize.Widget.ThumbZoom, {
thumbNodes:{
tagName:'A',
className:'thumbnail'
},
imageValidator : null
}
);
page.wireUi();
}
});
// --></script>
</body>
</html>
◆
3回に渡ってUIZE Frameworkの基本的な使い方、アニメーション機能を使ったUIの作り方を紹介しました。UIZE Frameworkにはほかにも面白いウィジェットや機能が多数用意されています。興味を持った方はぜひ試してみてください。それでは、また次回。
