クールに画像をズームできるFancyZoomというJavascriptによるスクリプトを発見したのでメモです。
画像をかっこよくズームするのに、Lightboxをはじめ、多数のスクリプトがありますが、久しぶりにビビっときたので使ってみました。
使い方は簡単で、
- サイトよりZipファイルをダウンロードします
- FancyZoom.jsの冒頭の以下の部分を適当に置き換えます
var zoomImagesURI = '/images-global/zoom/';
- Webサイトにファイルをアップロードします。
- HTMLの<head>セクションに次の行を加えます。
<script src="/path/to/FancyZoom.js" type="text/javascript"></script>
<script src="/path/to/FancyZoomHTML.js" type="text/javascript"></script>
※/path/to/部分は適当に置き換えます - <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.
0 件のコメント:
コメントを投稿