图片放大预览插件使用

应用前提：项目中有一个功能需要显示上传的图片，同时还需要能够放大显示，基于此，选择使用jquery.lightbox-0.5.js插件。

首先引入插件需要的文件：

<script src="assets/vendor/jquery/jquery.js"></script>

<script src="assets/vendor/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>

<link rel="stylesheet" href="assets/vendor/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css"/>

html图片预览基本设置：

<div class="form-group">
	<label class="col-sm-2 left-label">截图列表：</label>
	<div class="col-sm-10">
		<div class="col-sm-10" id="gallery">
			<ul>
				<li>
					<a href="assets/vendor/jquery-lightbox-0.5/photos/image1.jpg">
						<img src="assets/vendor/jquery-lightbox-0.5/photos/thumb_image1.jpg" width="48" height="48" alt="Nature and sunrise">
					</a>
				</li>
				<li>
					<a href="assets/vendor/jquery-lightbox-0.5/photos/image2.jpg">
					    <img src="assets/vendor/jquery-lightbox-0.5/photos/thumb_image2.jpg" width="48" height="48" alt="Nature and sunrise" />
					</a>
				</li>
															
			 </ul>
		</div>
	</div>
</div>

初始化插件配置：

$(function(){
     //图片预览插件用于审批截图查看
	$('#gallery a').lightBox({
		imageLoading: 'assets/vendor/jquery-lightbox-0.5/images/lightbox-ico-loading.gif',
		imageBtnPrev: 'assets/vendor/jquery-lightbox-0.5/images/lightbox-btn-prev.gif',
		imageBtnNext: 'assets/vendor/jquery-lightbox-0.5/images/lightbox-btn-next.gif',
		imageBtnClose: 'assets/vendor/jquery-lightbox-0.5/images/lightbox-btn-close.gif',
		imageBlank: 'assets/vendor/jquery-lightbox-0.5/images/lightbox-blank.gif',//返回图片
		txtImage: '',
		txtOf: '/'//第几页图样式配置
	});
})

js中配置的图片是插件内部所必须的，在引入文件时，需要根据文件的路径，把相应的内置图片位置配上，否则插件会报错。

插件显示效果：

图片放大效果：

完整的图片预览插件，简单实用完成，不足之处，请多多指教。