开发者社区> 哈你真皮> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

支持移动触摸的jQuery图片Lightbox插件

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84180718 简介 这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84180718

简介

这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。该LightBox插件可以在移动手机和桌面设备中运行,它具有响应式,预加载图片,键盘支持等特点,非常实用。它的特点还有:
  • 响应式设计
  • 触控/触摸友好
  • 提供多项配置
  • 图像预加载
  • 支持 iOS / Android / Windows phone
  • 使用 CSS3 过度效果,并回退兼容旧浏览器
  • 支持 jQuery 1.x 和 2.x 版本
  • 支持键盘控制

在线演示及下载

在线演示:http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Simple Lightbox/

下载页面

使用方法

可以通过npm或bower来安装该插件。

npm install simplelightbox
bower install simplelightbox

或者下载该插件直接引用

引入文件


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

HTML


<div class="jqhtml">
    <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();
});

配置

选项

名称 类型 默认值 说明
overlay 布尔值 true 显示遮罩
spinner 布尔值 true 显示 Loading 效果
nav 布尔值 true 显示左右导航
navText 数组 [‘&larr;’,’&rarr;’] 左右导航的文本
captions 布尔值 true 显示标题/描述
captionsData 字符串 title 标题/描述来源,可指定 title 或 data-title
close 布尔值 true 显示关闭按钮
closeText 整数 123456 关闭按钮的文本
fileExt 正则表达式 ‘png|jpg|jpeg|gif’ 限制图片格式
animationSpeed 整数 250 动画过度时间
preloading 布尔值 true 预加载图片
enableKeyboard 布尔值 true 键盘支持,方向键控制,Esc 退出
loop 布尔值 true 循环
docClose 布尔值 true 点击空白处关闭
swipeTolerance 整数 50 移动设备上滑动多少像素开始切换
className 字符串 simple-lightbox 添加 class
widthRatio 浮点数 0.8 图像宽度于屏幕宽度的的比例
heightRatio 浮点数 0.9 图像宽度于屏幕高度的的比例

自定义事件

名称 说明
show.simplelightbox Lightbox 开启前的事件
shown.simplelightbox Lightbox 开启后的事件
close.simplelightbox Lightbox 关闭前的事件
closed.simplelightbox Lightbox 关闭后的事件

示例


$('.jqhtml a').on('open.simplelightbox', function(){
    // do something…
});

公共方法

名称 说明
open 开启 Lightbox
close 关闭 Lightbox
next 显示下一个
prev 显示上一个
destroy 销毁 Lightbox
示例:

var $dowebok = $('.dowebok a').simpleLightbox();
$dowebok.next();

官方主页:http://andreknieriem.de/simple-lightbox/

GitHub 地址:https://github.com/andreknieriem/simplelightbox

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
推荐40个简单的 jQuery 导航插件和教程【下篇】
  在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程。导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容。
654 0
分享精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了20个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1098 0
精心挑选的15款优秀 jQuery 文本特效插件和教程
  今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程。jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。
1070 0
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互。下面向大家分享8个优秀的 jQuery倒计时插件和教程。 jQuery Countdown spriteTimer php ajax/jque...
795 0
10个实用的jQuery交互/通信插件和教程
在网站或应用程序中添加交互或通信功能,可以为用户带来非常棒的使用体验。本文整理了10个非常实用的jQuery插件和教程,可以帮助你在网站或应用中整合交互或通信功能,如新闻预览、显示最近日志的小部件、友情链接侧边栏等。
1004 0
20+ 个很棒的 jQuery 文件上传插件或教程
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。
2221 0
12 月份 10 个新鲜的 jQuery 插件和教程
1. MASHA (Mark & Share) MASHA (Mark & Share 的缩写) 是一个可以让你分享网页部分内容的 JavaScript 库。 2. JScraft scroller 通过点击某个图片,该图将移到网页中央,其他相应的图片进行位置滑动。
703 0
20+ 个有用的 Google 地图的 jQuery 插件和教程
gMap – Google Maps Plugin For jQuery bMap – jQuery Plugin $.goMap – google maps jQuery plugin qmap3 – A jQuery plugin to use google maps vers...
900 0
推荐40个非常优秀的 jQuery 插件和教程【系列三】
  jQuery 在如今的 Web 开发项目中扮演着重要角色,jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。本文大家分享40个实用的 jQuery 插件,可以根据您的项目需要来选择使用。
1032 0
40款非常棒的 jQuery 插件和制作教程(系列二)
  jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
974 0
+关注
354
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载