jquery放大镜以及点击小图查看大图

第一：html页面

                                        <div class="jqzoom">
				              <img src="images/T1.png" jqImg="images/T1.png" id="bigImg" /><!--此处的jqImg是自己定义，用来显示大图的图片-->
					</div>
					<a class="thickbox" href="images/T1.png" ><span id="thickbox_span">此处查看清晰图片</span></a>
					<div class="jqImages">
						<img src="images/T1.png" />
						<img src="images/T2.png" />
						<img src="images/T3.png" />
				        </div>

点击下面3张小图，在上面的大图中能显示，而且可以使用放大镜

"此处查看清晰图片"  使用弹出层显示大图

第二：css文件

.jqzoom{
	margin:40px;
	clear: both;
	margin-bottom:20px;
}
.jqzoom img{
	width:300px;
	height:350px;
	margin:5px;
	margin-bottom:0px;
	padding-bottom:0px;
}
.jqImages{
	width:360px;
	height:160px;
	border:1px solid #DDDDDD;
	clear: both;
	margin:10px;
	margin-top:20px;
}
.jqImages img{
	width:110px;
	height:150px;
	float: left;
	margin:5px;
	cursor: pointer;
}
#thickbox_span{
    clear: both;
    margin-left:130px;
}

第三：js文件

$(function(){
	$(".jqzoom").jqueryzoom({
		xzoom:400,
		yzoom:400,
		offset:10,
		position:"right",
		preload:1
	});
 });

$(function(){
       //点击小图变大图
	$(".jqImages img").click(function(){	
		var imgSrc=$(this).attr("src");
		var i=imgSrc.lastIndexOf(".");//截取小数点以及后面的字符
		var unit=imgSrc.substring(i);
		imgSrc=imgSrc.substring(0,i);//截取小数点前面的字符
		var imgSrc_jq=imgSrc+unit;
		$("#bigImg").attr({"src":imgSrc_jq,"jqImg":imgSrc_jq});
		$(".thickbox").attr("href",imgSrc_jq);
	});
});

此处再引进jquery库以及

<script src="script/jquery.jqzoom.js" type="text/javascript"></script>

<script src="script/thickbox.js" type="text/javascript"></script>

大概的效果就实现了