FancyZoom 1.0を試す。

Posted by kumacchi on 2008年2月8日 , No comment

FancyZoomはlightbox等と同じように画像をかっこよく表示する為のJavaScriptで作成されたアプリケーションです。このブログでもSlimBoxを設置して画像をウニョーンと表示できるようにしています。今日GIGAZINEを見ていたらFancyZoomが紹介されていたので配布サイトにいってみて試してみたらかっこよかったので実際にダウンロードして試してみることにします。この記事を書きながら設置をしてみます。
↓↓↓設置方法↓↓↓

１．とりあえず配布サイトにいってFancyZoomをダウンロードします。
http://www.cabel.name/2008/02/fancyzoom-10.html
上のサイトに言って
FancyZoom 1.0.zip (53 KB)をダウンロードしました。
２．FancyZoomのJavaScriptを自分のサイトにFTP等でアップロード
ダウンロードしたFancyZoom 1.0.zipを解凍すると

images-global
js-global

という二つのフォルダが出来たので両方をフォルダごと自分のサイトのルートにFTPでアップロードした。
３．実際に使用するページにFancyZoomを使うための記述を行う。
※このページに設置してみようかと思ったけど、設置のしかたみると<head>部分や<body>部分に色々書かないといけないようなので、現在このページに記述しているSlimBoxと干渉しそうで嫌なので別ページを作って設置してみることにする。
下記のコードをFancyZoomを使うページの<head></head>の間に記述する。

<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>

４．bodyタグの部分に必要な記述を行う。
元サイトに下記の様にあるので

<body id=”whatever” […] onload=”setupZoom()”>

実際にはbodyタグのところに下記の部分を追記した。
id=”whatever” onload=”setupZoom()”
５．画像を貼り付けるタグを書く
配布サイトには下記の様にある

<a href=”image.jpg”><img src=”image-thumbnail.jpg” /></a> will zoom up image.jpg when clicked.

判りやすく（？）書くと
<a href=”画像のファイル名”><img src=”サムネイルのファイル名” /></a>
という風に画像を貼り付ければOKですよーと言う事に成ります。
lightbox等と違ってタグに細工をする必要がないので
ブログの場合などはブログ投稿支援ツールなどを利用して自動的にサムネイルをつくって投稿する場合などでも特に投稿支援ツールをカスタマイズする必要もないので便利ですね。
※説明で判らないところは実際にテストページをみてソースをみてみてください。
ライセンスは、非商用ページなら無料と書いてあるようですので非商用のサイトなら無料で使えるようです。商用サイトの場合は１サイトにつき３９ドル払ってねと書いてあるようです。（正確な情報は自分で確認してね。）
●FancyZoomを設置してみたテストページ
https://blog.kumacchi.com/gagagagaga/FancyZoom.html

(Visited 71 times, 1 visits today)

タグ : javascript, lightbox