digilog.blog

スポンサーサイト

--/--/--(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

日本語対応FLASHウェブギャラリー「TiltViewer」の使い方!

2009/07/05(日)
TiltViewer
無料で簡単に使えるウェブ画像ギャラリー「TiltViewer」は、マウスの動きで角度が変わり、まるで浮遊しているような操作感が楽しいのでインパクトはかなり大きめです。自分で撮った写真をかっこよく見せたい!自分で作った作品の画像を飾って多くの人に見てもらいたい!という人には打って付けでしょう。

誰でも簡単に設置することができるので、ホームページやブログとリンクして、自分の撮った写真や、作品を公開する場として利用してみてはいかがでしょうか。

便利な「TiltViewer」の使用方法とカスタマイズのやり方は以下。
まず始めに

配布元のSimpleViewer.netより一式ダウンロードします。
TiltViewer

ダウンロードしたファイルを解凍してフォルダを開きます。
使用するファイルは下記5点。
・TiltViewer.swf
・swfobject.js
・index.html
・gallery.xml
・imgs

最初は動作確認のために、「index.html」を開いてみて下さい。サンプルの画像が表示されたらOKです。マウスを動かしたり写真をクリックしてみて下さい。ここでうまく表示されない場合、使っているパソコンの環境を整えてから使いましょう。



基本的な使い方

「imgs(名前変更可)」というフォルダが画像を格納する場所です。ここにギャラリーに表示させたい画像を入れます。後で整理しやすいようにファイル名を工夫しておきましょう。

「gallery.xml」を開いて先ほどimgsフォルダに入れた画像のファイル名を指定します。下記赤文字の部分を変更して下さい。フォルダ名を変更した場合は合わせて変えておきます。※ソース内の余計なスペースが気になる方は始めに除去しておきましょう。
gallery.xml
<photo imageurl="imgs/img.jpg" linkurl="http://www.google.com">
<title>Image 1</title>
<description>This is a regular text description.</description>
</photo>

次に写真のタイトルを指定します。タイトルは写真を裏返すアクションを行った時に表示されます。
gallery.xml
<photo imageurl="imgs/img.jpg" linkurl="http://www.google.com">
<title>Image 1</title>
<description>This is a regular text description.</description>
</photo>

さらに、写真を裏返した時に表示する説明文を付けたい場合には、下記を編集します。
gallery.xml
<photo imageurl="imgs/img.jpg" linkurl="http://www.google.com">
<title>Image 1</title>
<description>This is a regular text description.</description>
</photo>

任意のリンクURLを張りたい場合は下記を編集します。必要ない場合は削除してしまいます。
gallery.xml
<photo imageurl="imgs/img.jpg" linkurl="http://www.google.com">
<title>Image 1</title>
<description>This is a regular text description.</description>
</photo>

手っ取り早く画像を並べて見れるようにできればいいという方は、これで設定終了です。あとは画像の枚数分繰り返せば終わりです。
画像のタイトルや説明文に日本語を使いたい場合や、細かい設定のやりかたを知りたい方は、そのまま読み進めてください。

タイトルや説明文に日本語を使う場合

文字化けなしの日本語化を行うには、全てのファイルの文字コードを統一しなければなりません。例えば「index.html」の初期文字コードは、「iso-8859-1」になっていると思います。
index.html
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
この場合「gallery.xml」のソース編集モードを、同じ「iso-8859-1」にしないと、日本語を記述した部分が文字化けしてしまいます。TeraPadであれば、一度ソースを丸ごとコピーして「ファイル>文字コード指定再読み込み>Unicode」を実行した後、コピーしたソースを貼り付けて保存します。
gallery.xml


画像の大きさが合わない場合

TiltViewerを表示させたときに、画像同士が重なってしまう場合、一度自分が保存した画像のサイズを全て確認してみましょう。その中で最も大きいサイズに合わせてindex.htmlの設定を変更します。
index.html
fo.addVariable("maxJPGSize","1240");

説明文にHTMLタグを使いたい場合

XML内でHTMLタグを使用したい場合CDATAセクションを使います。
gallery.xml
<photo imageurl="imgs/img.jpg" linkurl="http://www.google.com">
<title>Image 1</title>
<description>
<![CDATA[HTMLタグを使えば、<font color="#ff0000">文字の色</font>や<font size="+3">文字の大きさ</font>、<b>太さ</b>、<u>アンダーライン</u>や<i>斜体</i>などの文字装飾ができます。]]>
</description>
</photo>



カスタマイズ

さらに細かい設定をしたい場合は「index.html」内のJavaScriptを編集して下さい。コメントアウトしている機能を有効にする場合には、「//」を削除します。
index.html > XML GALLERY OPTIONS
fo.addVariable("useFlickr", "false or true");
Frickrの写真を使うかどうか。falseでXML使用。
fo.addVariable("xmlURL", "gallery.xml");
("useFlickr", "false")だった場合に使用するXMLファイル
fo.addVariable("maxJPGSize","0~n");
画像のサイズ最大値。この画像サイズに合わせて縮小されるので、画像の大きさはなるべく統一した方が良い

index.html > GENERAL OPTIONS
fo.addVariable("useReloadButton", "true or false");
再読込ボタンを画像一覧の下に表示する(true)か、next,backの矢印ボタンを表示する(false)か
fo.addVariable("columns", "1~n");
縦に表示する画像の数
fo.addVariable("rows", "1~n");
横に表示する画像の数
fo.addVariable("showFlipButton", "true or false");
画像をズームしたときに「flipボタン」を表示する(true)か、しない(false)か
fo.addVariable("showLinkButton", "true or false");
画像をズームしたときに「go to Flickr page」を表示する(true)か、しない(false)か
fo.addVariable("linkLabel", "View image info");
「go to Flickr page」に表示するテキスト
fo.addVariable("frameColor", "0xFFFFFF");
画像の枠色を指定
fo.addVariable("backColor", "0xFFFFDD");
画像の裏側の背景色を指定
fo.addVariable("bkgndInnerColor", "0x0066FF");
FLASH全体の背景グラデーションの中心色を指定
fo.addVariable("bkgndOuterColor", "0x000000");
FLASH全体の背景グラデーションの外側色を指定
fo.addVariable("langGoFull", "Go Fullscreen");
右クリックメニューの「Go Fullscreen」表記の変更
fo.addVariable("langExitFull", "Exit Fullscreen");
右クリックメニューの「Exit Fullscreen」表記の変更
fo.addVariable("langAbout", "About");
右クリックメニューの「About TiltViewer」表記の変更

「FLICKR GALLERY OPTIONS」については、こちらを参照して下さい。

これで一通りの設定を終えることができます。どうでしょうか、お気に入りのギャラリーができたなら、きっと写真撮影や作品作りがもっと楽しくなることと思います!この記事があなたの創作活動の参考になりますように。
TiltViewerをダウンロード

関連記事

おすすめFLASHウェブギャラリー「Simple Viewer」の使い方
■コメント
コメント投稿
URL:
コメント:
PASS:
秘密: 管理人のみに公開
 

プロフィール

管理人:LOSTMAN
東京でWebディレクターをやっています。独学で楽しみながら興味のあることを投稿していきます。

タグキーワード

関連サイト

HTML講座
CSS講座
SEO講座
無料素材・画像
HOME
[ FC2 ID ]
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。