码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-11-17 14:40:00      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:浏览器   lin   jquer   特点   文本   点击空白   tar   speed   一个   

简介

这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。该LightBox插件可以在移动手机和桌面设备中运行,它具有响应式,预加载图片,键盘支持等特点,非常实用。它的特点还有:


  • 响应式设计

  • 触控/触摸友好

  • 提供多项配置

  • 图像预加载

  • 支持 iOS / Android / Windows phone

  • 使用 CSS3 过度效果,并回退兼容旧浏览器

  • 支持 jQuery 1.x 和 2.x 版本

  • 支持键盘控制

在线演示及下载

在线演示

下载页面

使用方法


可以通过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

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

标签:浏览器   lin   jquer   特点   文本   点击空白   tar   speed   一个   

原文地址:https://www.cnblogs.com/lalalagq/p/9973553.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!