skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

クールなズームエフェクトjavascript「jQZoom」

｜ ｜ ｜ ｜ ｜ ｜ ｜

画像を拡大表示するのにLightBoxを使用するのはもう時代遅れ。
LightBoxではできない指定場所の拡大もできます。
jQZoomはズームエフェクトをクールに実現します。

使用方法
jQZoomからjquery.jqzoom.jsとjqzoom.cssをjQueryからjquery.jsをダウンロードします。
<link rel="stylesheet" href="http://yourdomain/jqzoom.css" type="text/css" media="screen">
<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.jqzoom.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
$("img.jqzoom").jqueryzoom();
});
</script>
上記を記述し、拡大させたい画像に以下のようにclass="jqzoom"を付与します。
<img src="画像小" class="jqzoom" alt="画像大">
クールなズームエフェクトjavascript「jQZoom」サンプル

記事作成：2007年12月19日

前の記事：iTunesライクな画像ギャラリーjavascript「imageFlow」
次の記事：画像に3Dの反射効果を与えるjavascript「3d image reflection with javascript」