lightbox点击图片预览

首先引入 ：

<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

例：

var imgUrl="https://img0.baidu.com/it/u=1462702225,3884903262&fm=26&fmt=auto&gp=0.jpg"; s = "<a href='"+imgUrl+"' class='pic_a'><img src='"+imgUrl+"' style='border:solid 1px #CE8031;width:20px;height:20px;margin:0px 5px 0px 5px;' data_src='"+imgUrl+"' name= 'photo' ></img></a>";

// 列表

var lightBoxSetting = {
   "imageLoading": '<%=request.getContextPath()%>/jsp/images/lightbox-ico-loading.gif',
   "imageBtnPrev": '<%=request.getContextPath()%>/jsp/images/lightbox-btn-prev.gif',
   "imageBtnNext": '<%=request.getContextPath()%>/jsp/images/lightbox-btn-next.gif',
   "imageBtnClose": '<%=request.getContextPath()%>/jsp/images/lightbox-btn-close.gif',
   "imageBlank": '<%=request.getContextPath()%>/jsp/images/lightbox-blank.gif',
   "containerResizeSpeed" : 300
};

列表查询结束后回调函数   查询结束后默认执行
function callbackSearch(responseText, tabId){
   //实现点击小图时图片放大
   $(".pic_a").lightBox(lightBoxSetting);
   //$("#dia-tab-partinfo a[name='pic_a']").lightBox();
}

备注 ：

//jquery.lightbox-0.5.js
function _set_interface() {
			// Apply the HTML markup into body tag
			$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"/><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');
			// Get page sizes
			var arrPageSizes = ___getPageSize();
			// Style overlay and show it
			$('#jquery-overlay').css({
				backgroundColor:	settings.overlayBgColor,
				opacity:			settings.overlayOpacity,
				width:				arrPageSizes[0],
				height:				arrPageSizes[1]
			}).fadeIn();
			// Get page scroll
			var arrPageScroll = ___getPageScroll();
			// Calculate top and left offset for the jquery-lightbox div object and show it
			$('#jquery-lightbox').css({
				top:	arrPageScroll[1] + (arrPageSizes[3] / 10),
				left:	arrPageScroll[0]
			}).show();
			// Assigning click events in elements to close overlay
			$('#jquery-overlay,#jquery-lightbox').click(function() {
				_finish();									
			});
			// Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects
			$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
				_finish();
				return false;
			});
			// If window was resized, calculate the new overlay dimensions
			$(window).resize(function() {
				// Get page sizes
				var arrPageSizes = ___getPageSize();
				// Style overlay and show it
				$('#jquery-overlay').css({
					width:		arrPageSizes[0],
					height:		arrPageSizes[1]
				});
				// Get page scroll
				var arrPageScroll = ___getPageScroll();
				// Calculate top and left offset for the jquery-lightbox div object and show it
				$('#jquery-lightbox').css({
					top:	arrPageScroll[1] + (arrPageSizes[3] / 10),
					left:	arrPageScroll[0]
				});
			});
		}

一般情况下是$('body').append， 如果是子页面要实现的话则这块要改子页面的选择器；