Zoomy—jquery图片放大镜插件

原文链接及插件下载：http://zoomy.me/Home.htm

效果图：

 

用法：

 

使用Zoomy非常简单。

首先引入jQuery库，‘zoomy.css’文件，

还有Zoomy plugin 文件（jquery.zoomy1.3.3.min.js 或者 jquery.zoomy1.3.3.js 都可以）

<link type="text/css" rel="stylesheet" href="path-to/zoom1.3.3.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript" src="path-to/jquery.zoomy1.3.3.min.js."></script>

然后，确定你想要使用Zoomy的图片，以下是最常见的配置：

<a href="zoomImg.jpg" class="zoom">
    <img src="displayImg.jpg" alt="This is the Display Image" />
</a>

接着，增加以下js片段来开始Zoomy:

$(function(){
    $('.zoom').zoomy();                
}(jQuery))

可选择的用法：

链接到其他网站，但任然能使用Zoom

运用一下配置，我将展示给你看，使用一张链接到其他网站的图片下任然可以使用Zoom。

布局很熟悉，除了一个指向zoom image的属性

<a href="http://google.com" rel="zoomImg.jpg" class="zoom">
    <img src="displayImg.jpg" alt="This is the Display Image" />
</a>

之后，在调用zoomy时，设置有一点小变化

 

$(function(){
    $('.zoom').zoomy('mouseover',
        {
            clickable: true,
            attr: 'rel'   
        }
    );                
}(jQuery));

 

这里，初始化时，用'mouseover'代替了原来默认的'click'。

clickable option也相应的设置为：true，这样使鼠标单击锚标签时生效。

最后，我改变了attr option的attr，让它告诉zoomy，zoom image的路径在rel这个属性里。