2008/02/10
クールに画像をズームする[FancyZoom]
クールに画像をズームできるFancyZoomというJavascriptによるスクリプトを発見したのでメモです。
画像をかっこよくズームするのに、Lightboxをはじめ、多数のスクリプトがありますが、久しぶりにビビっときたので使ってみました。
使い方は簡単で、
- サイトよりZipファイルをダウンロードします
- FancyZoom.jsの冒頭の以下の部分を適当に置き換えます
var zoomImagesURI = '/images-global/zoom/';
- Webサイトにファイルをアップロードします。
- HTMLの<head>セクションに次の行を加えます。
<script src="/path/to/FancyZoom.js" type="text/javascript"></script>
※/path/to/部分は適当に置き換えます
<script src="/path/to/FancyZoomHTML.js" type="text/javascript"></script> - <body>タグにonload="setupZoom()"を加えます
あとは、次のように画像がリンク先になっているものを検出し自動でやってくれます。
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a> will zoom up image.jpg when clicked.
ちなみに、ズームしたくないものがある場合は、以下のようにrel="nozoom"を指定します。
<a href="image.jpg" rel="nozoom"><img src="image-thumbnail.jpg" /></a> will zoom up image.jpg when clicked.
また、aタグのtitle属性を指定することで、ズームウィンドウにキャプションを設定することもできます。
<a href="image.jpg" rel="nozoom" title="will zoom up image.jpg when clicked."><img src="image-thumbnail.jpg" /></a> will zoom up image.jpg when clicked.
ラベル: javascript
automatically translated by Google Translate Hack!