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