【jQuery】軽量、レスポンシブのライトボックスプラグインLity

Lityは軽量、レスポンシブのライトボックスjQueryプラグイン。

Installation

<link href="dist/lity.css" rel="stylesheet">
<script src="vendor/jquery.js"></script>
<script src="dist/lity.js"></script>

Declarative

<a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity>Image</a>
<a href="#inline" data-lity>Inline</a>
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>
<a href="//vimeo.com/1084537" data-lity>iFrame Vimeo</a>
<a href="//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>
<a href="/image.html" data-lity data-lity-target="/image-preview.jpg">Image</a>

Programmatic

// Open a URL in a lightbox
var lightbox = lity('//www.youtube.com/watch?v=XSGBVzeBUbk');
// Bind as an event handler
$(document).on('click', '[data-lightbox]', lity);

MIT

 
Lity

【jQuery】軽量、レスポンシブのライトボックスプラグインLity

  • LATEST
  • RELATED
  • POPULAR