パネルを使ったフォトアルバム
Yahoo! UI Libraryのパネルのサンプルページにパネルを利用したフォトアルバムがありますが、もっと手軽にフォトアルバムを実現させてみましょう。まず、これまで同様パネルを表示するためのHTMLタグを設定します。フォトアルバムなのでパネルの本文には<img>タグを指定します。<img>タグには操作するためのIDを指定しておきます。
パネルが表示されたらタイマーを使って一定時間ごと画像を入れ替える処理を呼び出します。画像を入れ替えるには<img>タグのsrc属性に表示する画像のURLを設定します。今回表示する画像は下図のようにphotoフォルダに3桁の数字の連番で格納されています。このような場合にはカウンタ変数を用意し、その値をファイル名として利用します。
フォトアルバム作成のための画像の下準備 |
Yahoo! UI LibraryではYAHOO.util.Dom.get()を利用してページ上にあるタグにアクセスすることができます。パラメータにはアクセスしたいタグのID名を指定します。これは基本的にdocument.getElementById()と同じになります。prototype.jsやjQuery、Adobe Spryでは$()に該当します。サンプル13ではパネル内に3秒ごと画像を入れ替えて表示します。
 |
 |
サンプル13の実行結果 |
パネル内の画像が |
 |
3秒ごとに入れ替わっていく |
サンプル13
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>YUIパネルサンプル</title>
<link rel="stylesheet" type="text/css" href="css/container.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript" src="js/dragdrop.js"></script>
<script type="text/javascript" src="js/container.js"></script>
<script type="text/javascript"><!--
var panelObj, imageCount = 2;
window.onload = function() {
panelObj = new YAHOO.widget.Panel("panel1", {
effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:1 }
});
panelObj.setHeader("■フォトアルバム 2007");
panelObj.render();
setInterval("changeImage()", 3000);
}
function changeImage(){
YAHOO.util.Dom.get("myPhoto").src = "photo/00"+imageCount+".jpg";
imageCount++;
if (imageCount > 8) imageCount = 1;
}
// --></script>
</head>
<body>
<h1>YUIパネルサンプル(パネル内に画像を表示)</h1>
<div id="panel1">
<div class="pHeader"></div>
<div class="pBody">
<img src="photo/001.jpg" width="384" height="216" id="myPhoto">
</div>
<div class="pFooter"></div>
</div>
</body>
</html>
パネルはHTMLタグを設定しIDを割り当てれば、いくつでも表示させることができます。サンプル14ではフォトアルバムの横に説明用のパネルを重ねて表示しています。必要であればパネルの奥行きはYAHOO.widget.Panel()の2番目のzIndexオプションで指定することができます。
 |
サンプル14の実行結果 |
パネル機能は手軽に使うことができ、いろいろな事に応用できる便利なものです。ぜひ、活用してみてください。
サンプル14
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>YUIパネルサンプル</title>
<link rel="stylesheet" type="text/css" href="css/container.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript" src="js/dragdrop.js"></script>
<script type="text/javascript" src="js/container.js"></script>
<script type="text/javascript"><!--
var panelObj, imageCount = 2;
window.onload = function() {
panelObj = new YAHOO.widget.Panel("panel1", {
effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:1 }
});
panelObj.setHeader("■フォトアルバム 2007");
panelObj.render();
setInterval("changeImage()", 3000);
// 2番目のパネル
panelObj2 = new YAHOO.widget.Panel("panel2", { xy : [310, 240] });
panelObj2.render();
}
function changeImage(){
YAHOO.util.Dom.get("myPhoto").src = "photo/00"+imageCount+".jpg";
imageCount++;
if (imageCount > 8) imageCount = 1;
}
// --></script>
</head>
<body>
<h1>YUIパネルサンプル(パネル内に画像を表示)</h1>
<div id="panel1">
<div class="pHeader"></div>
<div class="pBody">
<img src="photo/001.jpg" width="384" height="216" id="myPhoto">
</div>
<div class="pFooter"></div>
</div>
<div id="panel2">
<div class="pHeader">【お知らせ】</div>
<div class="pBody">
新しい写真を公開しました。
</div>
<div class="pFooter">最終更新日 : 2007年7月21日</div>
</div>
</body>
</html>
