在做web前端项目时候，产品图片展示有不同的方式展出，客户比较常见的需求：需要点击小图，弹出大图，并且大图还可以直接点击按钮进行前后切换。这样的效果，有非常多的jQuery可以实现，今天推荐一款jQuery插件——Lightbox（据说出来已经9年左右了）。

主要特点：开源简洁小巧，易用，支持响应式，动画效果也不错！

官网地址：

http://lokeshdhakar.com/projects/lightbox2/

gitHub地址：

https://github.com/lokesh/lightbox2

使用方法：

1. 下载并引用jquery和lightbox插件：

1. <script src="js/jquery-1.11.0.min.js"></script>
2. <script src="js/lightbox.min.js"></script>

2. 引入插件所需的css样式：

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

3. 为你所需要展示的图片添加data-lightbox="roadtrip"属性：

1. <a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
2. <a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
3. <a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

注意：如果插件已经运行了，但不显示关闭，和下一页的按纽，请检查CSS和和图片的路径是否正确！

具体的demo：

http://dreamsky.github.io/main/blog/lightbox/

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验

http://dingxiangming.com