使用lightbox插件实现图片预览功能

lightbox 插件可以实现图片的预览功能

lightbox 插件的 github 地址：https://github.com/lokesh/lightbox2

lightbox 插件的简单使用

一：引入 lightbox 的 js

<script src="/js/jquery.min.js"></script>  
<script src="/lightbox/lightbox.js"></script>

二：引入 lightbox 的 css

<link href="/lightbox/lightbox.css" rel="stylesheet" />

三：html 实现图片预览

1：单张图片的图片预览实现

<a href="/images/a1.jpg" data-lightbox="image-1" data-title="图片 1">  
    <img src="/images/a1.jpg" alt="">  
</a>  

2：多张图片的图片预览实现 (data-lightbox 使用相同的属性值实现多图预览)

<a href="/images/a1.jpg" data-lightbox="image-1" data-title="图片 1">  
    <img src="/images/a1.jpg" alt="">  
</a>  
<a href="/images/a2.jpg" data-lightbox="image-1" data-title="图片 2">  
    <img src="/images/a2.jpg" alt="">  
</a>  

如上我们就可以使用 lightbox 插件实现简单的图片预览功能