仿百度排列图片预览插件-Simple Lightbox

很久以前遇到过这样的一个面试题，要求手写代码，实现百度图片的排列预览，并且可以左右点击查看下一张照片，当时没有做出来，这个问题也就一直放在了脑后，工作之后，遇到这样的需求之后，第一反应想到的是在源码网站里面找一个插件，方便省事，不在像从前那般手敲代码，一敲就是一整天的感觉。

图片.png

正好前几天在群里解答一个人的问题，遇到了类似的插件，于是稍微总结了一下，对比了6款 jQuery Lightbox图片查看触控插件，实现不同的需求，下一篇文章推荐一下，这篇重点总结了Simple Lightbox – jQuery Lightbox插件。

效果图如下，多张图片错落有致的排列，点击每一张图片都会按照固定的长度和宽度预览展示。

图片.png

下载插件地址：http://www.dowebok.com/186.html
官方主页：http://andreknieriem.de/simple-lightbox/
GitHub 地址：https://github.com/andreknieriem/simplelightbox

Simple Lightbox 是一款基于 jQuery 的 Lightbox 插件，它具有以下特点：

响应式设计
触控/触摸友好
提供多项配置
图像预加载
支持 iOS / Android / Windows phone
使用 CSS3 过度效果，并回退兼容旧浏览器
支持 jQuery 1.x 和 2.x 版本
支持键盘控制

使用方法

1、引入文件

2、HTML

    
        
    
    
        
    
    
        
    
    ...

3、JavaScript

$(function(){
    $('.dowebok a').simpleLightbox();
});

完整代码：

默认效果


    
    
    
    

    
    
    
    

    
    
    
          

原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。