bootstrap+jquery 点击显示大图功能

这里用的是bootstrap的模态框

一、页面部分

①模态框部分：

	

		

			

				
					×
				
				

			
			
		
	

【注意点一】图片只设置宽度，这样就能等比例的放大了

②点击查看大图部分

查看大图

我这里是遍历取出值的，所以要输入图片地址和图片名称到函数里

二、jquery

// 查看大图
function showBigImg( pictrue, name){
	$("#modalLabel").text(name);
	$("#imgInModalID").attr("src", getContextPath()+"/images/"+pictrue);
	$("#imgModal").modal('show');
	//alert(pictrue +" "+name);
}
//jquery获得path路径
function getContextPath() {
	var pathName = document.location.pathname;
	var index = pathName.substr(1).indexOf("/");
	var result = pathName.substr(0,index+1);
	return result;
}