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

时间 2019-12-07

标签百度排列图片预览插件 simple lightbox 繁體版

原文原文链接

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

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

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

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

Simple Lightbox 是一款基于 jQuery 的 Lightbox 插件，它具备如下特色：git

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

使用方法

一、引入文件github

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

二、HTMLweb

<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>

三、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>

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