很久以前遇到过这样的一个面试题，要求手写代码，实现百度图片的排列预览，并且可以左右点击查看下一张照片，当时没有做出来，这个问题也就一直放在了脑后，工作之后，遇到这样的需求之后，第一反应想到的是在源码网站里面找一个插件，方便省事，不在像从前那般手敲代码，一敲就是一整天的感觉。
正好前几天在群里解答一个人的问题，遇到了类似的插件，于是稍微总结了一下，对比了6款 jQuery Lightbox图片查看触控插件，实现不同的需求，下一篇文章推荐一下，这篇重点总结了Simple Lightbox – jQuery Lightbox插件。
效果图如下，多张图片错落有致的排列，点击每一张图片都会按照固定的长度和宽度预览展示。
Simple Lightbox 是一款基于 jQuery 的 Lightbox 插件，它具有以下特点：
响应式设计 触控/触摸友好 提供多项配置 图像预加载 支持 iOS / Android / Windows phone 使用 CSS3 过度效果，并回退兼容旧浏览器 支持 jQuery 1.x 和 2.x 版本 支持键盘控制
使用方法
1、引入文件
<link rel="stylesheet" href="css/simplelightbox.min.css"> <script src="js/jquery.min.js"></script> <script src="js/simple-lightbox.min.js"></script>
2、HTML
<div class="dowebok"> <a href="images/image1.jpg"> <img src="images/thumbs/thumb1.jpg" alt="" title="第一张图片描述"> </a> <a href="images/image2.jpg"> <img src="images/thumbs/thumb2.jpg" alt="" title="第二张图片描述"> </a> <a href="images/image3.jpg"> <img src="images/thumbs/thumb3.jpg" alt="" title="第三张图片描述"> </a> ... </div>
3、JavaScript
$(function(){ $('.dowebok a').simpleLightbox(); });
完整代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>jQuery Lightbox插件Simple Lightbox演示-默认效果_dowebok</title> <link rel="stylesheet" href="css/simplelightbox.min.css"> <style> .dowebok { width: 790px; margin: 0 auto; font-size: 0;} .dowebok a { display: inline-block; width: 150px; margin: 5px;} .dowebok .big { width: 300px;} .dowebok img { width: 100%;} </style> </head> <body> <h1>默认效果</h1> <div class="dowebok"> <a href="images/image1.jpg" class="big"><img src="images/thumbs/thumb1.jpg" alt="" title="第一张图片描述"></a> <a href="images/image2.jpg"><img src="images/thumbs/thumb2.jpg" alt="" title="第二张图片描述"></a> <a href="images/image3.jpg"><img src="images/thumbs/thumb3.jpg" alt="" title="第三张图片描述"></a> <a href="images/image4.jpg"><img src="images/thumbs/thumb4.jpg" alt="" title="第四张图片描述"></a> <a href="images/image5.jpg"><img src="images/thumbs/thumb5.jpg" alt="" title="第五张图片描述"></a> <a href="images/image6.jpg"><img src="images/thumbs/thumb6.jpg" alt="" title="第六张图片描述"></a> <a href="images/image7.jpg" class="big"><img src="images/thumbs/thumb7.jpg" alt="" title="第七张图片描述"></a> <a href="images/image8.jpg"><img src="images/thumbs/thumb8.jpg" alt="" title="第八张图片描述"></a> <a href="images/image9.jpg" class="big"><img src="images/thumbs/thumb9.jpg" alt="" title="第九张图片描述"></a> <a href="images/image10.jpg"><img src="images/thumbs/thumb10.jpg" alt="" title="第十张图片描述"></a> <a href="images/image11.jpg"><img src="images/thumbs/thumb11.jpg" alt="" title="第十一张图片描述"></a> <a href="images/image12.jpg"><img src="images/thumbs/thumb12.jpg" alt="" title="第十二张图片描述"></a> </div> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/simple-lightbox.min.js"></script> <script> $(function(){ $('.dowebok a').simpleLightbox(); //微信:wwwangting888 不懂来问我吧 }); </script>
