用cloud-zoom做一个仿淘宝的宝贝放大镜查看功能

　　插件我就不多介绍了，在我整理的《常用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下载地址吧：点击下载