使用外掛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>