虫眼鏡のように画像を拡大「jQZoom」

下準備

1. jqzoom　http://www.mind-projects.it/blog/jqzoom_v10　から、スクリプトをダウンロードします。
2. 以下のように、CSS１点とJavascript２点をページに読み込みます。

3. <link rel="stylesheet" href="jqzoom.css" type="text/css" media="screen" />
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="jquery.jqzoom.js"></script>

4. 続いて、jQueryを動かす為のスクリプトをHTML上に以下のように記述します。
   

   <script type="text/javascript">
   $(document).ready(function(){
   $(".jqzoom").jqueryzoom();
    });
   </script>

5. jqzoomを使いたい画像をdiv class="jqzoom"で囲み、その中のimg要素に以下のように記述します。
   

   <div class="jqzoom"><img src="01.jpg" width="325" height="118" jqimg="02.jpg" /></div>

6. 準備完了！