lity

2018-07-13 admin

lity是什么

什么是lity,Lightweight responsive lightbox.

lity介绍、lity使用

<script src=“vendor/jquery.js”></script> <script src=“dist/lity.js”></script>


Lity can also be installed via Bower or [npm](https://www.npmjs.com/package/lity).

## [](#usage)Usage

### [](#declarative)Declarative

Add the `data-lity` attribute to `<a>` elements for which you want the links to be opened in a lightbox:

```text-html-basic
<a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity>Image</a>
<a href="#inline" data-lity>Inline</a>
<a href="https://www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>
<a href="https://vimeo.com/1084537" data-lity>iFrame Vimeo</a>
<a href="https://maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>

<div id="inline" style="background:#fff" class="lity-hide">
    Inline content
</div>

If you want to open another URI than defined in the href attribute, just add a data-lity-target with the URI:

<a href="/image.html" data-lity data-lity-target="/image-preview.jpg">Image</a>

Programmatic

The lity function can be either used directly to open URLs (or HTML) in a lightbox or as an event handler.

Lity lity(string target, [Object options, [, HTMLElement|$ opener]])

Arguments

  • target: The URL or HTML to open.
  • options: Options as an object of key-value pairs.
  • opener: The element which triggered opening the lightbox (if used as a event handler, this is automatically set to the element which triggered the event).

Return value

A Lity instance.

Example

// Open a URL or HTML in a lightbox
lity('https://www.youtube.com/watch?v=XSGBVzeBUbk');
lity('<p>Some content to show...</p>');

// Bind as an event handler
$(document).on('click', '[data-my-lightbox]', lity);

The Lity instance

If you open a lightbox programmatically, the lity function returns a Lity instance you can use to interact with the lightbox.

The Lity instance is also passed as the second argument to the event handlers.

var instance = lity('https://www.youtube.com/watch?v=XSGBVzeBUbk');

API

Lity.close

Closes the lightbox and returns a promise which resolves once the closing animation is finished.

instance.close().then(function() {
    console.log('Lightbox closed');
});

Lity.element

Returns the root HTML element.

var element = instance.element();

Lity.opener

Returns the HTML element which triggered opening the lightbox.

var opener = instance.opener();

Note: The value might be undefined if the lightbox has been opened programmatically and not by a click event handler and no opener argument was provided.

Lity.content

Returns the content HTML element.

var content = instance.content();

Note: The value is undefined while the content is loading.

Lity.options

Sets or returns options of the instance.

var allOptions = instance.options();

var template = instance.options('template');
instance.options('template', '<div>...

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35925.html

文章标题:lity

相关文章
visibility.js
visibility.js是什么 什么是visibility.js,Wrapper for the Page Visibility API visibility.js官网:官网 visibility.js文档:文档 visibility....
2018-06-25
Turn the Tooltip Bootstrap functionality off
EpocLorraine Bernard提出了一个问题:Turn the Tooltip Bootstrap functionality off,或许与您遇到的问题类似。 回答者Calum ChildsJasny - Arnold Dani...
2018-04-11
toggle visibility of div
H. Pauwelyntfer77提出了一个问题:Toggle visibility property of div,或许与您遇到的问题类似。 回答者tb11给出了该问题的处理方式: Using jQuery: $(&#x27;#play-...
2018-04-16
Javascript onclick return functionality
Shiroi98提出了一个问题:Javascript onclick return functionality,或许与您遇到的问题类似。 回答者BereY. Shoham给出了该问题的处理方式: Returning false from t...
2018-04-14
Extending functionality in TypeScript [duplicate]
Communityseries0ne提出了一个问题:Extending functionality in TypeScript [duplicate],或许与您遇到的问题类似。 回答者series0ne给出了该问题的处理方式: I have...
2018-04-14
How do I work around mutability in moment.js?
Shengbo1618提出了一个问题:How do I work around mutability in moment.js?,或许与您遇到的问题类似。 回答者razorbeard给出了该问题的处理方式: There’s a Moment...
2018-04-10
pipe() and then() documentation vs reality in jQuery 1.8
Adam Terlson提出了一个问题:pipe() and then() documentation vs reality in jQuery 1.8,或许与您遇到的问题类似。 回答者Frédéric Hamidi给出了该问题的处理方式:...
2018-04-21
How good is jQuery&apos;s support for backwards compatibility?
Paul SweatteJosh Mein提出了一个问题:How good is jQuery’s support for backwards compatibility?,或许与您遇到的问题类似。 回答者Lindsay给出了该问题的处理方...
2018-04-17
回到顶部