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

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

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

下载插件地址：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、引入文件

<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="data:images/thumbs/thumb1.jpg" alt="" title="第一张图片描述">

    </a>

    <a href="images/image2.jpg">

        <img src="data:images/thumbs/thumb2.jpg" alt="" title="第二张图片描述">

    </a>

    <a href="images/image3.jpg">

        <img src="data: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="data:images/thumbs/thumb1.jpg" alt="" title="第一张图片描述"></a>

    <a href="images/image2.jpg"><img src="data:images/thumbs/thumb2.jpg" alt="" title="第二张图片描述"></a>

    <a href="images/image3.jpg"><img src="data:images/thumbs/thumb3.jpg" alt="" title="第三张图片描述"></a>

    <a href="images/image4.jpg"><img src="data:images/thumbs/thumb4.jpg" alt="" title="第四张图片描述"></a>

    <a href="images/image5.jpg"><img src="data:images/thumbs/thumb5.jpg" alt="" title="第五张图片描述"></a>

    <a href="images/image6.jpg"><img src="data:images/thumbs/thumb6.jpg" alt="" title="第六张图片描述"></a>

    <a href="images/image7.jpg" class="big"><img src="data:images/thumbs/thumb7.jpg" alt="" title="第七张图片描述"></a>

    <a href="images/image8.jpg"><img src="data:images/thumbs/thumb8.jpg" alt="" title="第八张图片描述"></a>

    <a href="images/image9.jpg" class="big"><img src="data:images/thumbs/thumb9.jpg" alt="" title="第九张图片描述"></a>

    <a href="images/image10.jpg"><img src="data:images/thumbs/thumb10.jpg" alt="" title="第十张图片描述"></a>

    <a href="images/image11.jpg"><img src="data:images/thumbs/thumb11.jpg" alt="" title="第十一张图片描述"></a>

    <a href="images/image12.jpg"><img src="data: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>

原文作者：祈澈姑娘

原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

仿百度排列图片预览插件-Simple Lightbox的更多相关文章

  1. Vue PC端图片预览插件

    *手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...

  2. js图片预览插件，不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  3. eclipse 图片预览插件

      eclipse 图片预览插件 CreateTime--2018年4月22日22:59:55 Author:Marydon 下载地址:eclipse 图片预览插件 将插件文件夹直接拷贝到eclips ...

  4. 在 vue 中使用 vieiwer 图片预览插件

    https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...

  5. vue-preview vue图片预览插件+缩略图样式

    一.安装 npm i vue-preview -S 二.main.js中  导入组件 //vue-preview 开始 import VuePreview from 'vue-preview'; // ...

  6. 实现一个vue的图片预览插件

    vue-image-swipe 基于photoswipe实现的vue图片预览组件 安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...

  7. Vue.js图片预览插件

    vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault. ...

  8. 仿google art图片预览算法及demo（web版本）

    演示地址: http://codeman35.itongyin.com:19001/v3/preview.html 功能支持:拖动 滚轴放大缩小 按钮放大缩小 鹰眼预览 鹰眼拖动等功能

  9. vue 图片预览插件

    https://github.com/daidaitu1314/vue2-preview //cnpm cnpm install vue2-preview -save //引入 import VueP ...

随机推荐

  1. 一些css兼容问题

    由于各浏览器的不同,会存在一些兼容问题,特别是兼容IE6/7/8 下面简单介绍了一些解决方法,更多问题可以访问 W3help.org来查看. 可以通过js获取浏览器版本 document.body.i ...

  2. BZOJ 4372/3370 烁烁的游戏/震波 (动态点分治+线段树)

    烁烁的游戏 题目大意: 给你一棵$n$个节点的树,有$m$次操作,询问某个节点的权值,或者将与某个点$x$距离不超过$d$的所有节点的权值都增加$w$ 动态点分裸题 每个节点开一棵权值线段树 对于修改 ...

  3. BZOJ 2118 墨墨的等式 (同余最短路)

    题目大意:已知B的范围,求a1x1+a2x2+...+anxn==B存在非负正整数解的B的数量,N<=12,ai<=1e5,B<=1e12 同余最短路裸题 思想大概是这样的,我们选定 ...

  4. UNIX系统高级编程——第四章-文件和目录-总结

    文件系统: 以UNIX系统V文件系统为例: 磁盘分为区,每个分区都有自己的文件系统: ​ i节点是固定长度的记录项,包含了文件的相关信息.目录项包含文件名和i节点号.stat结构中除文件名和i节点编号 ...

  5. 【Codeforces Round #483 (Div. 2) C】Finite or not?

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 有个性质. 如果p/q是分数的最简形式. 那么p/q能化成有限小数. 当且仅当q的质因数分解形式中只有质因子2和5 (且不能出现其他 ...

  6. Mysql学习总结（30）——MySQL 索引详解大全

    什么是索引? 1.索引 索引是表的目录,在查找内容之前可以先在目录中查找索引位置,以此快速定位查询数据.对于索引,会保存在额外的文件中. 索引,是数据库中专门用于帮助用户快速查询数据的一种数据结构.类 ...

  7. IOS假设将一个十六进制的color转换成UIColor，非常有用

    UI给开发的效果图非常多时候标注着十六进制的Color,而程序中用到的往往是UIColor能够用例如以下方法去转换: (UIColor *)RGBColorFromHexString:(NSStrin ...

  8. 《深入理解Android 卷III》第五章 深入理解Android输入系统

    <深入理解Android 卷III>即将公布.作者是张大伟.此书填补了深入理解Android Framework卷中的一个主要空白.即Android Framework中和UI相关的部分. ...

  9. 第一个python作业题目以及代码

    1. 编写程序,用户输入一个三位以上的整数,输出其百位以上的数字.例如用户输入1234,则程序输出12.(提示:使用整除运算.) x=input("请输入一个三位以上的数字:") ...

  10. java中StringBuilder、StringBuffer、String类之间的关系

    今天在CSDN的高校俱乐部里看到了"Java基础水平測试(英文)".感觉自己学了java这么久,想看下自己的java水平究竟是个什么样.測试结果就不说了,反正是慘不忍睹. 看了一下 ...