使用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插件实现简单的图片预览功能