插件我就不多介绍了，在我整理的《常用JQuery插件整理》里介绍，也有示例。但在实际运用中，我发现一个插件无法达到的效果，语言比较难描述，看图说话吧
发现什么问题没有，我做了个demo，虽然已经达到放大镜的效果了，但是大图的显示位置不是我想要的效果，我想要的效果就是，大图的位置和左边图的外框平行，并且始终保持在那个位置。可能有人会说，插件不是提供了xy轴偏移的设置么。是，但是如果图片切换了，尺寸和原先的不一样，xy轴的偏移量要怎么重新设置？最终可能就会出现这样的效果
所以，为了实现我的需求，我就要对插件进行修改，好在插件提供了未压缩的代码，而且中文注释完整，所以我大致看了下源码，就修改出我需要的效果了，下面我细细说来：
首先，通过观察，发现插件大图显示的位置是和小图平行的，就是小图显示在什么位置，大图就是与其平行，出现在它的右侧，所以第一步就是固定小图宽度，当然我们不能直接把小图宽高定死，这样会拉伸图片造成失真，所以只能从插件里动手脚。
至于宽度要定多少，我打算是和小图外边那个框同宽，并且再长一点，达到这样的效果
打开插件，找到这句代码：
var
siw = outerWidth();
//图片的输出宽度
|
我们把它改为我们需要的值，因为我的外框是383px，再加上一点空隙，算10px，也就是393px，这样代码就修改成了：
var
siw = 393;
//图片的输出宽度
|
这么一来，我们已经解决了大图x轴固定的效果了，那么如何让y轴也固定呢，那我们就需要调整y轴。因为我们图片默认是在右侧显示，所以就找到了这段代码：
case
'right'
:
xPos += siw;
// + opts.adjustX;
break
;
|
我们发现，在默认情况下，插件是不设置y轴的偏移的，也就是默认和小图持平。所以，我在这里做了点修改：
case
'right'
:
xPos += siw;
// + opts.adjustX;
yPos = -(383-sImg.outerHeight())/2;
break
;
|
我想这个总不用我多解释了，就是实时计算出大图需要偏移的数值，外框高度减去图片高度除以2，就是大图需要向上的偏移量。
修改完以上2个地方，已经能达到我要的效果了，当然为了小图在外框中始终处于居中的位置，我也是通过插件来控制的，先看下底下三张小图切换的代码：
<
a
href='304327508.jpg' class='cloud-zoom-gallery' rel="useZoom:'zoom',smallImage:'s_304327508.jpg',marginTop:84,marginLeft:0">
<
img
src="s_304327508.jpg" width="50" />
</
a
>
<
a
href='1234567890.jpg' class='cloud-zoom-gallery' rel="useZoom:'zoom',smallImage:'s_1234567890.jpg',marginTop:0,marginLeft:22">
<
img
src="s_1234567890.jpg" height="50" />
</
a
>
<
a
href='123.jpg' class='cloud-zoom-gallery' rel="useZoom:'zoom',smallImage:'s_123.jpg',marginLeft:148,marginTop:137">
<
img
src="s_123.jpg" height="50" />
</
a
>
|
看下rel参数里，我增加了marginLeft和marginTop，这两个数值的目的就是让小图在外框内居中，当然插件里我们也要对其进行点修改，增加了一句：
$(
this
).bind(
'click'
, $(
this
),
function
(event) {
...
...
$(
'#'
+ data.useZoom).css({
'marginTop'
:event.data.data(
'relOpts'
).marginTop,
'marginLeft'
:event.data.data(
'relOpts'
).marginLeft});
...
...
});
|
至此，插件已经全部修改完，注意点有二：一、小图的尺寸不能超过外框，也就是在处理图片的时候必须按比例缩放。因为我们公司自己制作的图片上传插件有这功能，所以我只需设置下缩略图的宽高就行；二、marginLeft和marginTop必须手动计算，这个虽然不难，就是麻烦点，计算方式和计算y轴偏移量同理。
最后给个demo下载地址吧：点击下载
本文转自胡尐睿丶博客园博客，原文链接：http://www.cnblogs.com/hooray/archive/2011/11/28/2265714.html，如需转载请自行联系原作者
