nickdekruijk/lightbox.js

一个简单的 jQuery lightbox 插件

维护者

详情

github.com/nickdekruijk/lightbox.js

源代码

问题

安装次数: 23

依赖关系: 0

建议者: 0

安全: 0

星标: 1

关注者: 2

分支: 0

开放问题: 0

语言：JavaScript

0.0.2 2018-04-18 12:27 UTC

Requires

MIT 4689041dac58e7a4e983c590a32b825d051691dc

  • Nick de Kruijk <git.woop@nickdekruijk.nl>

jquerylightboxenlager

This package is auto-updated.

Last update: 2024-09-05 05:46:27 UTC

README

一个基本的 lightbox 插件。可以使用 CSS 完全自定义。

使用方法

HTML

<a href="/path/to/bigimage1.jpg" rel="lightbox" data-caption="Caption 1"><img src="/path/to/thumbnail1.jpg" alt=""></a>
<a href="/path/to/bigimage2.jpg" rel="lightbox" data-caption="Caption 2"><img src="/path/to/thumbnail2.jpg" alt=""></a>
<a href="/path/to/bigimage3.jpg" rel="lightbox" data-caption="Caption 3"><img src="/path/to/thumbnail3.jpg" alt=""></a>
<a href="/path/to/bigimage4.jpg" rel="lightbox" data-caption="Caption 4"><img src="/path/to/thumbnail4.jpg" alt=""></a>

CSS

根据您的需求设计 lightbox 的样式。例如

lightbox .caption {position:absolute;bottom:5%;right:5%;color:#fff}
lightbox .close {position:absolute;top:3%;right:3%;color:#fff}
lightbox .close:after {content:'×'}

JS

$('A[rel=lightbox]').lightbox({
    option1:'value1',
    option2:'value2'
});

选项：默认值|其他选项

arrowkeys: true|false             # Enable keyboard left and right arrow keys
touchwipe: true|false             # Enable touch device left and right swipe gestures
fadeIn: 400                       # Fade in animation time when showing lightbox
fadeOut: 300                      # Fade out animation time when closing lightbox
captionClass: 'caption'           # CSS Class to apply to the image caption DIV
background: 'rgba(0, 0, 0, 0.7)'  # Overlay background color