Zoomifyer EZ -webで高解像画像を表示

zoomify-t.jpg

以前、web上で大きな画像ファイルを細切れにし、ズーム/ドラッグ可能なflashページを書き出すソフト Zoomifyer EZを見かけて「へ〜」と思ったのですが、そのときは”チラ見”しただけで触れてなかったのであらためてダウンロード。ちょっと試してみました。上のサムネールをクリックして開くウィンドウにFlashが表示され、画像のズーム、ドラッグで移動ができます。

これの有効利用としては、商品画像を拡大して細かいとこまでチェックできるとか、学術的なサイトで資料画像を拡大するとかでしょうか。個人的には、昆虫や植物のマクロな写真を利用して「我が子向けの」図鑑とかいいかなと思ってます。ま、図鑑見るぐらいの歳になったらの話ですが。

こちらからダウンロード、無料で利用できます。


1. 使いたい画像をアプリケーションにドラッグ&ドロップすると、ファイル名と同じ名前のフォルダを作成、細分化した画像ファイルを保存してくれます。
2. 付属のテンプレートhtmlファイルをコピー、任意の名前に変更しタグ内タグと“タグのvalue属性内zoomifyImagePathで作成されたフォルダーへのパスを指定。必ず2カ所とも指定。
3. htmlファイルと、zoomifyViewer.swf、画像の入ったフォルダを同階層にアップロード。

zoomifyImagePath意外のパラメーターは以下の通り。

zoomifyMinZoom:
1 〜 100:縮小したときの、元画像に対する最小値。
-1:Flashの表示サイズにあわせる。
zoomifyMaxZoom:
1〜100:拡大したときの、元画像に対する最大値。
-1:Flashの表示サイズにあわせる
zoomifyNavWindow:
1:左上ナビゲーションウィンドウを表示。
0:ナビゲーションウィンドウ非表
zoomifyToolbar:
1:下部ツールバーを表示。
0:ツールバーを非表示。
zoomifyX:
-1〜1:ページ読み込み直後の画像の横方向位置を指定。
0:中央に表示。
zoomifyY:
-1〜1:ページ読み込み直後の画像の縦方向位置を指定。
0:中央に表。
zoomifyZoom:
1〜100:ページ読み込み直後の画像の表示サイズを指定。
-1:Flashの表示サイズにあわせる。
zoomifySlider:
1:ツールバーにズームスライダーを表示。
0:ズームスライダーを非表示。

各パラーメータは パラメーター名=値 で指定し、複数指定する場合はパラーメータ間を「&」で区切ります。

ちなみに、このままでも動作しますが、winIEでは例の問題のせいで、“タグで直接Flashを埋め込むと閲覧時にひと手間必要になってしまいます。この問題を回避するにはJavascrptで埋め込むタグをdocument.writeします。とりあえず今回はAdobeで配布しているJavascriptを利用しました。

AdobeのサイトからサンプルファイルをダウンロードAC_RunActiveContent.jsを任意のディレクトリにアップロード。

内に以下を追加

ZomifyerEZ付属のテンプレート内、部分を以下のように書き換え

AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0',
'width','450',
'height','321',
'id','theMovie',
'FlashVars','zoomifyImagePath=画像の入ったフォルダ/',
'menu','false',
'src','zoomifyViewer',
'quality','high',
'pluginspage','http://www.macromedia.com/go/getflashplayer'
);

もっとシンプルなやり方でいい気もしますが、とりあえず今回はまんま利用してみました。

このエントリーをはてなブックマークに追加
はてなブックマーク - Zoomifyer EZ -webで高解像画像を表示
Facebook にシェア
[`google_buzz` not found]
[`yahoo` not found]
[`livedoor` not found]
[`friendfeed` not found]
[`tweetmeme` not found]

スポンサーリンク