JavaScriptを用いると動きのあるWebページを作成することができます。紹介するFancyZoomというのは、名前から推測できる通り、ズームするという効果を要素に持たせることができるようになるライブラリです。画像に対してズームすることが多いのですが、リンク先をクリックして説明文をズーム画面で表示させることもできます。FancyZoomは非商用に限って無料で使えるそうです。個人的なページではタダということですね。以下、FancyZoomの導入手順について説明します。英語は簡単な説明なので、ここでは細かめに説明します。
- FancyZoomライブラリをダウンロードしてきます。ダウンロード先はこちらになります。instructionsと書かれた先の下にzipファイルのアイコンがあるので、それをクリックして保存します。
- ファイルを解凍します。トップディレクトリ(FancyZoom 1.1)の下に2つディレクトリができるのですが、_MACOSXではない方のFancyZoom 1.1というディレクトリを利用します(以下ではこのディレクトリをFZというディレクトリ名で表記します)。
- FZディレクトリをサーバのトップディレクトリにおきます。ただし、そういう権限が無い中で作業しないといけないかもしれません。そのような時は、ライブラリを使いたいhtmlファイルと同じ位置にFZディレクトリを置きましょう。トップディレクトリに置かない場合は、js-globalディレクトリ以下のFancyZoom.jsの53行目にある、
var zoomImagesURI = '/images-global/zoom/';
をディレクトリの位置に書き換える必要があります。例えば、'./FZ/images-global/zoom/'と変更し、画像の位置を相対パスで表記することにします。これを行わないと、画像を拡大したときに左上にでる×マークの画像が正しい場所を示していないので、見栄えが悪くなります。 - ライブラリを利用したいhtmlファイルでライブラリが使えるようにしていきます。トップディレクトリにライブラリを置くことができるのであれば、以下のようになりますし、htmlファイルと同じ位置にFZディレクトリを置くのであれば、srcの値は相対パスで記述すればよいことになります。htmlファイルで書き込む場所はheadタグの内部になります。
<script src="/FZ/js-global/FancyZoom.js" type="text/javascript"></script> <script src="/FZ/js-global/FancyZoomHTML.js" type="text/javascript"></script>
- <body>タグにonload="setupZoom()"を追加します。これはhtmlファイルをロードしたときにJavaScriptのsetupZoom()関数を実行せよということを意味しています。
- <a href="ズーム後に表示したい画像へのリンク"><img src="htmlファイルで表示する画像" /></a>のようにすれば作業完了。
その他、細かい仕様も載っていて、上と同じぐらい重要なことが書いてあります。
- ズームした画像の下にキャプションをつけるには、hrefと一緒にtitle="～"を追加します。
- hrefの最初の要素を利用して、位置やズームの表示位置を決めています。
- ズームしたくない画像があるのであれば、hrefと一緒にrel="nozoom"と書きます。
- ズーム機能を持たせられる画像はjpg、gif、png、bmp、tiffになります。
- 画像をクリックして拡大画像を表示するという使い方もありますが、テキストに拡大画像へのリンクを設定するという使い方もできます。
0 件のコメント:
コメントを投稿