jQuery 点击图片放大 灯箱效果

使用插件lightBox2，原文及实例代码：

http://www.shouce.ren/study/api/s/6948

github地址：https://github.com/lokesh/lightbox2/

引入js及 css

<link rel="stylesheet" href="//ku.shouce.ren/libs/lightbox/2.7.1/css/lightbox.css">
<script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js"></script>
<script type="text/javascript" src="//ku.shouce.ren/libs/lightbox/2.7.1/js/lightbox.min.js"></script>

单张图片展示：

<div class="example">
	<h3>单张图片展示</h3>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-1.jpg" data-lightbox="example-1">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-1.jpg" alt="image-1">
	</a>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-2.jpg" data-lightbox="example-2" data-title="可选的标题">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-2.jpg" alt="image-2">
	</a>
</div>

一组图片展示：

<div class="example">
	<h3>一组图片</h3>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-3.jpg" data-lightbox="example-set" data-title="点击图片的右半边进入下一张">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-3.jpg" alt="thumb-3">
	</a>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-4.jpg" data-lightbox="example-set" data-title="按键盘上的右箭头也可以进入下一张">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-4.jpg" alt="thumb-4">
	</a>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-5.jpg" data-lightbox="example-set" data-title="下一张图片提前加载">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-5.jpg" alt="thumb-5">
	</a>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-6.jpg" data-lightbox="example-set" data-title="点击图片以外的区域或者关闭按钮，即可关闭灯窗。">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-6.jpg" alt="thumb-6">
	</a>
</div>