Webフォトギャラリーアプリ TiltViewerがかっこいい

Posted by kumacchi on 2009年11月12日 , No comment

XG001636

色々とFlashのWebフォトギャラリーソフトを探していたときに見つけた3Dのイメージビューアです。

とってもかっこいいのです。

実際にサンプルデモを見てみてください。

一覧から写真をクリックするとその写真が拡大表示され、回転マークをクリックすると、

くるっと写真が回転してコメントの画面になります。さらに回転マークをクリック数と画像に戻ります。

コメントには、フォントタグと、太い文字、取り消し線、下線、イタリック等のタグが指定できます。ハイパーリンクは利用できません。

設定ファイルのgallery.xml内で各画像毎のリンク先を指定することはできます。

具体的には下記の様なxmlファイルです。コメントやリンク先ボタンの表示・非表示等を設定する事ができます。ファイルの文字コードをUTF-8で書けば日本語もちゃんと表示できます。

<tiltviewergallery>
    <photos>
        <photo imageurl="imgs/070111_0207~0002.jpg" linkurl="https://blog.kumacchi.com/">
            <title>ねこ01</title>
            <description>足を抱えて寝るねこ。日本語が使えるよ。</description>
        </photo>
        <photo imageurl="imgs/070328_0210~0003.jpg" linkurl="http://www.google.com">
            <title>Image 2</title>
            <description><![CDATA[足の間に<b>頭</b>を <u>はさんで</u>, <i>眠る</i>, 猫<br>そして<font color="#ff0000" size="60">フォントタグ</font>.ハイパーリンクはサポートしてない。]]></description>
        </photo>
        <photo imageurl="imgs/070328_0211~0002.jpg" >
            <title>ねこ３</title>
        <description>リンクボタンが表示されない例。</description>
        </photo>
        <photo imageurl="imgs/070328_1245~0005.jpg" linkurl="http://www.google.com" showFlipButton="false">
            <title>猫の写真４</title>
            <description>洗濯かごの中でねそべるねこ。フラップボタンを表示しない例。</description>
        </photo>
        <photo imageurl="imgs/070328_1304~0004.jpg" linkurl="http://www.google.com">
            <title>ばんざーい</title>
        </photo>

（中略）

        <photo imageurl="imgs/CA350327.jpg" linkurl="http://www.google.com">
            <title>Image 16</title>
        </photo>
    </photos>
</tiltviewergallery>

１画面に表示する縦と横の枚数は設定で変更できます。設定はindex.htmlに記述するオプションで行います。色々細かく指定する事ができます。

こんな感じ。

    var fo = new SWFObject("TiltViewer.swf", "viewer", "100%", "100%", "9.0.28", "#000000");
    // TILTVIEWER CONFIGURATION OPTIONS
    // To use an option, uncomment it by removing the "//" at the start of the line
    // For a description of config options, go to:
    // http://www.airtightinteractive.com/projects/tiltviewer/config_options.html
    //FLICKR GALLERY OPTIONS
    // To use images from Flickr, uncomment this block
    //fo.addVariable("useFlickr", "true");
    //fo.addVariable("user_id", "48508968@N00");
    //fo.addVariable("tags", "jump,smile");
    //fo.addVariable("tag_mode", "all");
    //fo.addVariable("showTakenByText", "true");
    // XML GALLERY OPTIONS
    // To use local images defined in an XML document, use this block
    fo.addVariable("useFlickr", "false");
    fo.addVariable("xmlURL", "gallery.xml");
    fo.addVariable("maxJPGSize","640");
    //GENERAL OPTIONS
    fo.addVariable("useReloadButton", "false");
    fo.addVariable("columns", "4");
    fo.addVariable("rows", "4");
    //fo.addVariable("showFlipButton", "true");
    //fo.addVariable("showLinkButton", "true");
    fo.addVariable("linkLabel", "goto Link");
    //fo.addVariable("frameColor", "0xFF0000");
    //fo.addVariable("backColor", "0xDDDDDD");
    //fo.addVariable("bkgndInnerColor", "0xFF00FF");
    //fo.addVariable("bkgndOuterColor", "0x0000FF");
    //fo.addVariable("langGoFull", "Go Fullscreen");
    //fo.addVariable("langExitFull", "Exit Fullscreen");
    //fo.addVariable("langAbout", "About");
    // END TILTVIEWER CONFIGURATION OPTIONS
    fo.addParam("allowFullScreen","true");
    fo.write("flashcontent");
</script>