专栏首页编程微刊仿百度排列图片预览插件-Simple Lightbox

仿百度排列图片预览插件-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、引入文件

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

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="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后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • svn踩坑-xxx is not valid as filename in directory

    今天在更新一个 ui设计小姐姐的设计图的时候,svn界面报了这样的一个错误,小姐姐上传到svn的图片,我没有办法拉到自己的本地来。

    祈澈菇凉
  • 微信小程序云开发数据库操作一添加记录

    微信小程序云开发 初学者入门教程二-前端操作数据库模块:https://www.jianshu.com/p/fb5be2e7f507中有写到对数据库的一些简单的...

    祈澈菇凉
  • uni-app提交表单成功之后跳转首页

    功能需求: 1:填写表单内容,点击提交审批按钮,提交成功之后,弹出弹框,提示已经提交成功。2:提交成功之后,两秒钟之后自动跳转到首页

    祈澈菇凉
  • python实现简单爬虫--爬图片

    py3study
  • Artificial Intelligence Language

    绿巨人
  • 图像处理之特征提取

    知乎上看到一个话题—— 目前火热的 Deep Learning 会灭绝传统的 SIFT / SURF 特征提取方法吗? ---- 由于之前研究过SIFT和HO...

    echobingo
  • 扩展你的复制集:MongoDB 4.0中从节点的非阻塞读操作

    MongoDB 4.0增加了一个能力,在副本处理写操作的同时可以由从节点(secondary)读取数据。为了理解这个的重要性,让我们看看4.0版本之前从节点是如...

    MongoDB中文社区
  • 统计学与pandas学习(四)——这个数据是“平常”还是“特殊”?

    fanzhh
  • Mac 全栈开发-查看IOS应用崩溃时的日志

    用户1065635
  • flask入门补充

      在上篇文章提到了json的编码问题。那么Flask是国外开发的框架,没有考虑到中文编码,那么我们就需要自己配置

    py3study

扫码关注云+社区

领取腾讯云代金券