本效果设计当单击产品小图片时，上面对应的大图片会自动切换，并且大图片的放大镜效果和遮罩效果也能够同时切换。
【操作步骤】
第1步，先实现第一个效果：单击小图切换大图。.在图片放大镜的jqroom的例子中，我们自定义一个rel属性，它的值是gal1，它是小图切换大图的“钩子”，HTML代码如下所示：
<li class="imgList_blue">
<a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_one_small.jpg',largeimage: 'images/pro_img/blue_one_big.jpg'}">
<img src='images/pro_img/blue_one.jpg' alt=""/>
</a>
</li>
在上面代码中，为超链接元素定义了一rel属性，它的值又定义了3个属性，分别是gallery、smallimage和largeimage。其作用就是点击小图时，首先通过gallery'来找到相应的元素，然后为元素设置smallimage和largeimage。
第2步，此时点击小图可以切换大图，但单击“观看清晰图片”按钮时，弹出的大图并未更新。接下来就来实现这个效果。
实现这个效果并不难，但为了使程序更加简单，需要为图片便用基于某种规则的命名。例如，为小图片命名为blue_ one small.jpg，为大图片命名为blue_one_ big. jpg，这样就可以很容易地根据单击的图片（blue_one.jpg）来获取相应的大图片和小图片。
第3步，新建JavaScript文档，保存为switchImg.js，然后输入下面代码：
/* 点击左侧产品小图片切换大图 */
$(function(){
$("#jnProitem ul.imgList li a").bind("click",function(){
var imgSrc = $(this).find("img").attr("src");
var i = imgSrc.lastIndexOf(".");
var unit = imgSrc.substring(i);
imgSrc = imgSrc.substring(0,i);
var imgSrc_big = imgSrc + "_big"+ unit;
$("#thickImg").attr("href" , imgSrc_big);
});
});
通过lastIndexOf()方法，获取到图片文件名中最后一个“.”的位置，然后在substring()方法中使用该位置来分割文件名，得到blue_one和.jpg两部分，最后通过拼接_big得到相应的大图片，将它们赋给id为 thickImg的元素。
第4步，应用代码后，当单击产品小图片时，不仅图片能正常切换，而且它们所对应的放大镜效果和遮罩层效果都能正常显示出当前显示的产品的图片，效果如图1所示。
图1 产品图片遮罩效果