【ハウツー】ゼロからはじめるYahoo! UI Library - Panel編 (8) フォトアルバムを作成してみる | パソコン

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

パソコン

急上昇ワード

[

]

【ハウツー】

ゼロからはじめるYahoo! UI Library - Panel編

8 フォトアルバムを作成してみる

古籏一浩　 [2008/05/23]

印刷

先頭
前へ
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- ／8

パネルを使ったフォトアルバム

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>