« 『CSSでつくるiPodtouchのWEB』 アップルストア心斎橋に参加してきました。 | メイン | Google Analyticsの新しいトラッキングコード ga.js »
2008年4月 1日
シンプルな画像拡大スクリプト「FancyZoom」
画像を拡大表示させるJavascriptは数あれど、これほどシンプルなものはないのではないか？と思われるのが「FancyZoom」です。
デモの確認とソースのダウンロードは下記のサイトから。
cabel.name: FancyZoom 1.1
2008年2月8日に1.1にバージョンアップしたようです。
使い方はいたってシンプル。
ダウンロードしてきたスクリプトにリンクを貼ります。
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
bodyタグにonloadで読み込み。
<body onload="setupZoom()">
あとはサムネールの画像のimgタグにアンカータグで拡大画像へリンクを貼るだけ。
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>
画像から画像へのリンクは全てスクリプトが効きます。
他の画像拡大スクリプトのように、適用したい画像に記述を追加するのではなく、「適用したくない画像」にだけ、スクリプトを記述します。
rel="nozoom"
この記述を追加すれば、画像拡大しません。
title属性で画像のキャプションもつけることができます。
なぜ、数ある画像拡大スクリプトの中で、コレだけ紹介したかというと、このブログで採用したからです。
（飽きたらはずすかもしれませんが・・・）
投稿者 lepracaun : 2008年4月 1日 01:38
トラックバック
このエントリーのトラックバックURL:
http://www.lepracaun.info/mt4/mt-tb.cgi/99
