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

XG001636

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

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

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

 

XG001637

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

XG001638

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

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

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

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

<tiltviewergallery>
    <photos>
        <photo imageurl="imgs/070111_0207~0002.jpg" linkurl="http://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>ねこ3</title>
        <description>リンクボタンが表示されない例。</description>           
        </photo>
        <photo imageurl="imgs/070328_1245~0005.jpg" linkurl="http://www.google.com" showFlipButton="false">
            <title>猫の写真4</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>

 

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

こんな感じ。

<script type="text/javascript">

    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>   

 

各オプションの説明は下記ページで解説されています。(英語)

◇参考:TiltViewer Configuration Options

XG001639

画像が1ページに収まらないときはページ切り替え用の矢印が表示されているので、これをクリックすると

XG001642

パラパラとかっこよく写真が飛んできて入れ替わります。セガサターンの起動画面を思い出しますw。

設置は簡単なので、ちょっとかっこよく写真を紹介したい場合はいいかも。

◇配布サイト:TiltViewer – About

タグ :