jQueryプラグイン:画像拡大鏡--jQuery Zoom

これは非常に良い画像に拡大鏡効果を追加し、zen cart、magento電子デパートなどのオープンソースプロジェクトに適用することができます.その効果を見たい場合は、直接アクセスすることができます.
 
http://www.mind-projects.it/projects/jqzoom/demos.php
 
 
いいと思ったらダウンロードして遊びましょう.jQueryから出てきたプラグインはとても使いやすいので、勉強の例にもなります.
 
インストール方法:
 
 
まず、jQueryファイルをWebページに含め、次にjQZoomファイルを含めます.

<script type='text/javascript' src='js/jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>

次にjqzoom.cssをWebページに追加します.

<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />

    ?

Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image. 

       ,     <a>  ,        ,         :
 
<a href="images/BIGIMAGE.JPG" class="MYCLASS"  title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"  >
</a>
  
SMALLIMAGE.JPG:これはデフォルトユーザーが た  、つまりその   された  です
BIGIMAGE.JPG:   で た  MYCLASS:Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well)この           。  , class      jQZoom  MYTITLE/IMAGE TITLE:        。          ,             jQZoom.$(document).ready(function){
$('.MYCLASS).jqzoom();
});
これはjQZoomのラベルモードを  するだけで、  にはより くのパラメータを  してより くの  を ることができます。 の を てください。$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: "right" //and MORE OPTIONS
};
$('.MYCLASS).jqzoom(options);
});