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

正好前几天在群里解答一个人的问题，遇到了类似的插件，于是稍微总结了一下，对比了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 插件，它具有以下特点：

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

使用方法

1、引入文件

  1. <link rel="stylesheet" href="css/simplelightbox.min.css">
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/simple-lightbox.min.js"></script>

2、HTML

  1. <div class="dowebok">
  2.     <a href="images/image1.jpg">
  3.         <img src="data:images/thumbs/thumb1.jpg" alt="" title="第一张图片描述">
  4.     </a>
  5.     <a href="images/image2.jpg">
  6.         <img src="data:images/thumbs/thumb2.jpg" alt="" title="第二张图片描述">
  7.     </a>
  8.     <a href="images/image3.jpg">
  9.         <img src="data:images/thumbs/thumb3.jpg" alt="" title="第三张图片描述">
  10.     </a>
  11.     ...
  12. </div>

3、JavaScript

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

完整代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery Lightbox插件Simple Lightbox演示-默认效果_dowebok</title>
  6. <link rel="stylesheet" href="css/simplelightbox.min.css">
  7. <style>
  8. .dowebok { width: 790px; margin: 0 auto; font-size: 0;}
  9. .dowebok a { display: inline-block; width: 150px; margin: 5px;}
  10. .dowebok .big { width: 300px;}
  11. .dowebok img { width: 100%;}
  12. </style>
  13. </head>
  15. <body>
  16. <h1>默认效果</h1>
  18. <div class="dowebok">
  19.     <a href="images/image1.jpg" class="big"><img src="data:images/thumbs/thumb1.jpg" alt="" title="第一张图片描述"></a>
  20.     <a href="images/image2.jpg"><img src="data:images/thumbs/thumb2.jpg" alt="" title="第二张图片描述"></a>
  21.     <a href="images/image3.jpg"><img src="data:images/thumbs/thumb3.jpg" alt="" title="第三张图片描述"></a>
  22.     <a href="images/image4.jpg"><img src="data:images/thumbs/thumb4.jpg" alt="" title="第四张图片描述"></a>
  24.     <a href="images/image5.jpg"><img src="data:images/thumbs/thumb5.jpg" alt="" title="第五张图片描述"></a>
  25.     <a href="images/image6.jpg"><img src="data:images/thumbs/thumb6.jpg" alt="" title="第六张图片描述"></a>
  26.     <a href="images/image7.jpg" class="big"><img src="data:images/thumbs/thumb7.jpg" alt="" title="第七张图片描述"></a>
  27.     <a href="images/image8.jpg"><img src="data:images/thumbs/thumb8.jpg" alt="" title="第八张图片描述"></a>
  29.     <a href="images/image9.jpg" class="big"><img src="data:images/thumbs/thumb9.jpg" alt="" title="第九张图片描述"></a>
  30.     <a href="images/image10.jpg"><img src="data:images/thumbs/thumb10.jpg" alt="" title="第十张图片描述"></a>
  31.     <a href="images/image11.jpg"><img src="data:images/thumbs/thumb11.jpg" alt="" title="第十一张图片描述"></a>
  32.     <a href="images/image12.jpg"><img src="data:images/thumbs/thumb12.jpg" alt="" title="第十二张图片描述"></a>
  33. </div>
  35. <script src="js/jquery-1.11.3.min.js"></script>
  36. <script src="js/simple-lightbox.min.js"></script>
  37. <script>
  38. $(function(){
  39.     $('.dowebok a').simpleLightbox();
  40.      //微信:wwwangting888 不懂来问我吧
  41. });
  42. </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. mmap详解

    共享内存可以说是最有用的进程间通信方式,也是最快的IPC形式, 因为进程可以直接读写内存,而不需要任何 数据的拷贝.对于像管道和消息队列等通信方式,则需要在内核和用户空间进行四次的数据拷贝,而共享内存 ...

  2. [Linux C]系统调用(system call)和库函数调用(Library functions)

    Linux 下对文件操作有两种方式:系统调用(system call)和库函数调用(Library functions).系统调用实际上就是指最底层的一个调用,在 linux 程序设计里面就是底层 调 ...

  3. 洛谷P5238 整数校验器

    看到没有边读入边处理的,我来水一发 我们要看一下有那些情况是格式不合法的 单独的负号 -0(后面可以有其他数字) 0 +(后面一些数字) 我们用快速读入的方法 读取字符进行处理 还有可能超出范围的 考 ...

  4. Spring IOC过程

    https://www.processon.com/diagraming/5c96171fe4b0f88919b98497 1. AbstractApplicationContext:执行refres ...

  5. ASP.NET-AJAX.FORM提交附件失败

    尝试了不少时间在AJAX.FORM提交附件,发现完全不行,经过下面的这个博客的介绍,使用ajax.form.js插件提交成功,记录一下该博文网址和结论: 相关网址:http://www.cnblogs ...

  6. shell脚本学习之ubuntu删除多余内核

    #!/bin/bash #定期删除内核 #存储命令输出cmd_output=`commands` uname_output=$(uname -r) kernel_output=`dpkg --list ...

  7. ABAP FIELD-SYMBOLS 有大作用- 将没有可改參数的增强出口变得也能改主程序的值了

    看下图代码: report  z_xul_test2 中 定义了 全局变量 G_DATA1 , 分别调用了 z_xul_tes1 中的 form  和 function zbapi_test , 这两 ...

  8. Oracle 学习笔记 14 -- 集合操作和高级子查询

    Oracel提供了三种类型的集合操作:各自是并(UNION) .交(INTERSECT). 差(MINUS) UNION :将多个操作的结果合并到一个查询结果中,返回查询结果的并集,自己主动去掉反复的 ...

  9. MySQL之----在java编程加强知识点

    在数据中,建表处理是非经常见且非常有用的方法. 表和表之间的关系有 1:1  1:N         N:N 三种方式. 1对1的方式 <span style="font-size:1 ...

  10. C#上传文件

    QQ:1187362408 欢迎技术交流和学习 关于C#上传文件(产品开发): TODO: 1.文件大小不足500M(web.config配置直接处理) 2,文件大小超过500M(ASP.NET分段读 ...