simplelightbox, 使用jQuery触摸友好的移动和桌面图像 lightbox

分享于 

11分钟阅读

GitHub

  繁體 雙語
Touch-friendly image lightbox for mobile and desktop with jQuery
  • 源代码名称:simplelightbox
  • 源代码网址:http://www.github.com/andreknieriem/simplelightbox
  • simplelightbox源代码文档
  • simplelightbox源代码下载
  • Git URL:
    git://www.github.com/andreknieriem/simplelightbox.git
    Git Clone代码到本地:
    git clone http://www.github.com/andreknieriem/simplelightbox
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/andreknieriem/simplelightbox
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    simplelightbox

    使用jQuery触摸友好的移动和桌面图像 lightbox

    特性

    • 响应
    • touchfriendly
    • 为下一个/上一个图像滑动手势
    • 易于安装,易于使用
    • 简约
    • 只包含一些 css。 你可以更改样式,如你所想 !
    • 很多选项
    • 预加载下一个和上一个图像
    • Android,iOs和 Windows Phone 支持
    • 对于老浏览器,CSS3随回退而转换
    • 在每个现代浏览器中工作,即使是 IE 9 +
    • 可以使用. x, 1 2.x 和 3。x
    • 键盘支持

    安装

    
    
    
    
    //YARN
    
    
    yarn add simplelightbox
    
    
    
    //Bower
    
    
    bower install simplelightbox
    
    
    
    //NPM
    
    
    npm install simplelightbox
    
    
    
    

    用法

    将 simplelightbox.css 和 simple-lightbox.js 包含到页面中

    
    
    
    
    var lightbox = $('.gallery a').simpleLightbox(options);
    
    
    
    

    JavaScript选项

    属性默认类型说明
    sourceAttrhref字符串用于大图像的属性
    覆盖truebool显示覆盖或者不覆盖
    spinnertruebool显示 Spinner 或者不
    navtruebool显示箭头导航或者不显示
    navText['←','→' ]array导航箭头的文本或者 html
    字幕truebool如果availabled或者不显示字幕
    captionSelector'img'字符串设置标题所在的元素。 将它设置为"自我",用于标记本身
    captionType'attr'字符串如何获取标题。 你可以在 attr,数据或者文本之间进行选择
    captionsData标题字符串从给定属性获取标题
    captionPosition'''字符串标题的位置。 选项是顶部,底部或者外部( 注意外部可以在可见视口中) !
    captionDelay0int在字幕显示前添加延迟( 毫秒)
    captionClass''''字符串向sl标题中添加附加类
    关闭truebool显示关闭按钮或者不显示
    closeText''×''字符串关闭按钮的文本或者 html
    swipeClosetruebool向上或者向下滑动以关闭图片库
    showCountertruebool显示当前图像索引或者不显示
    fileExt'png|jpg|jpeg|gif''正则表达式或者 false插件使用的FileExtensions列表或者 false 用于禁用检查的列表
    animationSpeed250int幻灯片动画的长度
    animationSlidetruebool要在新照片中滑动,请禁用 fade
    预载truebool允许在下一个图像下加载预加载
    enableKeyboardtruebool允许键盘箭头导航并用ESC键关闭
    循环truebool通过图像启用循环
    关系false混合同选择器链接关系的分组图像。
    docClosetruebool单击外部按钮时关闭收藏夹
    swipeTolerance50int你要刷多少像素,直到下一个或者上一个图像
    类名:'简单灯箱''字符串将类添加到lightbox的包装器
    widthRatio:0.8浮点数图像宽度与屏幕宽度的比值
    heightRatio:0.9浮点数图像高度与屏幕高度的比率
    disableRightClickfalsebool在图像上禁用右击
    disableScrolltruebool打开收藏夹时停止滚动页面
    alertErrortruebool如果没有找到图像,则显示警告。 如果 false 错误将被忽略
    alertErrorMessage没有找到图像,将加载下一个图像"'字符串如果未找到图像则显示的消息
    additionalHtmlfalse字符串显示 inside 每个图像的附加 HTML。 如果不添加 false,则适用于水印 等等
    历史记录truebool启用历史记录关闭lightbox而不是重新加载页面

    事件

    名称 描述
    show.simplelightbox此事件在lightbox打开之前激发
    shown.simplelightbox这里事件在收藏夹打开后激发
    close.simplelightbox此事件在lightbox关闭前激发
    closed.simplelightbox收藏夹关闭后激发此事件
    change.simplelightbox此事件在图像更改之前激发
    changed.simplelightbox更改图像后激发此事件
    next.simplelightbox此事件在下次图像到达之前激发
    nextDone.simplelightbox此事件在下一个图像到达后激发
    prev.simplelightbox此事件在上一个图像到达之前激发
    prevDone.simplelightbox这里事件在上一个图像到达后激发
    nextImageLoaded.simplelightbox此事件在加载下一幅图像后激发( 如果加载已经激活)
    prevImageLoaded.simplelightbox在加载上一个图像后激发此事件( 如果加载已经激活)
    error.simplelightbox此事件在图像加载错误时激发

    示例

    
    
    
    
    $('.gallery a').on('open.simplelightbox', function () {
    
    
     // do something...
    
    
    });
    
    
    
    $('.gallery a').on('error.simplelightbox', function (e) {
    
    
     console.log(e); // some usefull information
    
    
    });
    
    
    
    

    public-方法

    名称 描述
    打开"%s"使用给定的jQuery元素打开 lightbox
    关闭关闭当前的openend收藏夹
    下一步转到下一个图像
    上次转到上一个图像
    销毁销毁收藏夹的实例
    刷新销毁和 reinitilized,需要例如。 Ajax调用,或者在dom操作之后

    示例

    
    
    
    
    var gallery = $('.gallery a').simpleLightbox();
    
    
    
    gallery.next(); // Next Image
    
    
    
    

    一个页面上的多个 lightbox

    如果你给一个页面不同的选择器,你可以在一个页面上拥有多个 lightbox。 下面是一个小例子:

    
    
    
    
    var lightbox1 = $('.lighbox-1 a').simpleLightbox();
    
    
    var lightbox2 = $('.lighbox-2 a').simpleLightbox();
    
    
    
    

    文档级自定义项

    你可以通过更改 simplelightbox.css. 中的样式来自定义 Simplelightbox

    如果使用 SASS,则可以使用以下变量自定义 Simplelightbox

    
    
    
    
    $sl-font-family: Arial, Baskerville, monospace;
    
    
    $sl-overlay-background: #fff;
    
    
    $sl-navigation-color: #000;
    
    
    $sl-caption-color: #fff;
    
    
    $sl-caption-background: #000;
    
    
    
    $sl-counter-fontsize: 1rem;
    
    
    $sl-close-fontsize: 3rem;
    
    
    
    $sl-breakpoint-medium: 35.5em; //568px, when 1rem == 16px
    
    
    $sl-breakpoint-large: 50em; //800px, when 1rem == 16px
    
    
    
    $sl-arrow-fontsize-small: 2rem;
    
    
    $sl-arrow-fontsize-medium: 3rem;
    
    
    $sl-arrow-fontsize-large: 3rem;
    
    
    $sl-img-border-small: 0 none;
    
    
    $sl-img-border-medium: 0 none;
    
    
    $sl-img-border-large: 0 none;
    
    
    $sl-iframe-border-small: 0 none;
    
    
    $sl-iframe-border-medium: 0 none;
    
    
    $sl-iframe-border-large: 0 none;
    
    
    
    

    变更日志

    1.12.1 - 修复 #88,#87 并移除绑定/取消绑定 #84
    1.12.0 - 新选项 captionClass #81, 修复 #82
    1.11.1 - 合并请求请求 #76. 感谢 walterebert,增加了对参数和文件扩展名的支持,检查 #59
    1.11.0 - 图像源的新选项。 比如 数据属性 #70
    添加了 1.10.7 compatibility Bootstrap 兼容性 #69
    1.10.6 - 合并请求请求 #65. 感谢 mstaniuk
    1.10.5 - 合并请求请求 #60 和 #61. 感谢 slavanga
    1.10.4 #58 Bugfix von
    1.10.3 - 合并请求请求 #55, #56 和 #57. 感谢 karland
    1.10.2 - 对齐导航和关闭按钮 #51, 固定图像错误 Bug #52
    1.10.1 - 增加对 jQuery 3.x #50的支持
    1.10.0 - 实现功能请求 #48, 历史,一些bugfixing和代码样式
    1.9.0 实现功能请求 #16, 为组映像添加rel选项
    1.8.6 - 实现功能请求 #46, 添加刷新方法
    1.8.5 功能请求 #44
    1.8.4 - 修复 #41 和添加选项,额外的html inside 图像 #40
    为 #38 和小的其他修复提供了收费- Bugfix
    1.8.2 - 更好地修复 #33, finally,修复多个页面上的多个lightbox问题
    1.8.1 - 修复 #31, #32 和 #33
    1.8.0 - 新的API事件( 已经更改为显示) 和 function open() Crofte带来的小补丁,以及一些其他小错误修正工具
    1.7.2 #25 修复von和 #27
    带有新选项alertError和合并请求 #23的 1.7.1 #22
    为照片增加 ,修正图片的Bugfix,为字幕延迟提供选项,为字幕延迟提供选项
    1.6.0 - 标题位置的选项。 如果循环为 false 并且位置是第一个或者最后一个,则禁用上一个或者下一个箭头。
    1.5.1 - 修复一个页面上的多个 lightbox
    为禁用 rightclick rightclick scrolling scrolling和scrolling按钮text更改默认的prev-和下一步按钮文本添加的 1.5.0
    1.4.6 - fileExt选项现在可以为 false,启用像 example.com/pic/200/100 这样的图片
    在移动设备上打开 1.4.5 修正的lightbox does
    1.4.4 - 修正没有在法郎中的drag&下降,改变默认关闭文本,只有输出数据,如果lightbox是打开的
    1.4.3 - 修正 z-index 为 Spinner的,增加了sass文件
    1.4.2 Bugfix修复问题- Drop事件在鼠标离开窗口时不会触发
    1.4.1 - 整个标题选择器被重写。 你现在可以选择元素并获取它的文本,使用数据或者属性
    1.4.0 - Caption属性现在可以是什么,你想要的还是数据标题。 修正了一些小问题
    1.3.1 修正:如果lightbox关闭,则禁用键盘控制
    1.3.0 - 添加的当前索引指示器/计数器
    1.2.0 - 添加标题属性( 标题或者数据标题) 选项
    1.1.2 - 修复循环图像
    1.1.1 - 修正加载指示器,并删除了日志事件
    为lightbox包装和 width/height比率添加了 1.1.0
    1.0.0 - 初始发行版

    作者

    贡献者

    nicekiwi
    helloilya
    bitstarr

    ,。


    图像  DES  Light  桌面  友元  触摸  
    相关文章