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

正好前几天在群里解答一个人的问题，遇到了类似的插件，于是稍微总结了一下，对比了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. input的radio根据value和name反向显示

    1.获取radio的值,是根据name设置一组单选框. 例如: <div id="sexBox"> <input type="radio" i ...

  2. php字符处理

    1.strstr 截取某个字符后的字符: echo strstr("123456789","5");//输出:6789

  3. 有效解决ajax传中文时，乱码的情况，php处理接收到的值

    在抽奖环节时,需把获奖名单通过ajax的post方式传输给php后台进行储存,但是php接收到的值确是乱码.在百度之后并没有找到合适的解决方法. 则使用js的encodeURI函数可以有效解决,但不知 ...

  4. UVALive-8077 Brick Walls 找规律

    题目链接:https://cn.vjudge.net/problem/UVALive-8077 题意 有一个用砖头磊起来的墙,现在又有一只蚂蚁,想沿着砖缝从起点跑到终点. 问最短路长度. 思路 找规律 ...

  5. php5 中魔术方法函数有哪几个

    魔术函数:9.3 构造函数:__construct() 9.3.1 实例化对象时被调用. 9.3.2 在类中,构造函数是用来初始化对象的,利用构造函数,可以操作对象,并改变它的值. 9.3.3 当__ ...

  6. Map的四种遍历方法

    1.取值遍历 for(String key:map.keySet()){ System.out.println("key="+key+"and value=" ...

  7. pytorch 6 build_nn_quickly 快速搭建神经网络

    import torch import torch.nn.functional as F # replace following class code with an easy sequential ...

  8. Image Processing for Very Large Images

    The key idea here is the partial image descriptor VIPS(VASARI Image Processing System) 是近几年逐渐兴起的针对大图 ...

  9. javascript-datatable错误提示

    datatables插件在使用的时候出现了如下错误提示**出现此错误的原因可能是你写的table中没有加上<thead>和<tbody>标签所致**     来自为知笔记(Wi ...

  10. 8个超实用的Java测试工具和框架

    Java入门 如果你才刚开始接触Java世界,那么要做的第一件事情是,安装JDK——Java Development Kit(Java开发工具包),它自带有Java Runtime Environme ...