index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lity - Lightweight, accessible and responsive lightbox</title>
    <meta name="description" content="Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box.">

    <link href='https://fonts.googleapis.com/css?family=Lato:400,400italic|Arvo:700,400,400italic' rel='stylesheet' type='text/css'>
    <link href="assets/style.css" media="all" rel="stylesheet" type="text/css">
    <link href="assets/prism.css" media="all" rel="stylesheet" type="text/css">
    <link href="dist/lity.css" rel="stylesheet"/>

    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-34232738-1', 'auto');
        ga('set', 'anonymizeIp', true);
        ga('send', 'pageview');
    </script>
</head>
<body>
<h1><a href="./">Lity</a></h1>
<h2>Lightweight, accessible and responsive lightbox.</h2>

<p class="wrap wrap-center">
    <a class="btn btn-primary" href="https://github.com/jsor/lity/releases/latest">Download</a>
</p>

<div class="wrap">
    <p>Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports
    images, iframes and inline content out of the box.</p>

    <p>Minified and gzipped, its total footprint weights about 3kB.</p>

    <h3>Demos</h3>

    <p>
        <a class="btn" href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image</a>
        <a class="btn" href="#inline" data-lity>Inline</a>
        <a class="btn" href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>
        <a class="btn" href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>YouTube</a>
        <a class="btn" href="//vimeo.com/1084537" data-lity>Vimeo</a>
        <a class="btn" href="index.html" data-lity>URL</a>
    </p>

    <div id="inline" style="overflow:auto;background:#FDFDF6;padding:20px;width:600px;max-width:100%;border-radius:6px" class="lity-hide">
        <form>
            <fieldset style="border:0;">
                <ul style="list-style:none">
                    <li>
                        <label for="input">Input</label>
                        <input type="text" required name="name" id="input">
                    </li>
                    <li>
                        <label for="textarea" style="width:100%">Textarea</label><br>
                        <textarea id="textarea" rows="10" style="width:100%"></textarea>
                    </li>
                    <li>
                        <input type="submit">
                    </li>
                </ul>
            </fieldset>
        </form>
    </div>
</div>

<div class="wrap">
    <h3>Installation</h3>

    <p>All ready-to-use files are located in the <code>dist/</code> directory.</p>

    <p>Include the Lity javascript and css files and its dependencies in your HTML document:</p>

<pre><code class="language-markup">&lt;link href="dist/lity.css" rel="stylesheet">
&lt;script src="dist/lity.js">&lt;/script></code></pre>

    <p>Lity can also be installed via Bower or <a href="https://www.npmjs.com/package/lity">npm</a>.</p>
</div>

<div class="wrap">
    <h3>Usage</h3>

    <h4>Declarative</h4>

    <p>Add the <code>data-lity</code> attribute to <code>&lt;a></code> elements for which you want the links to
        be opened in a lightbox:</p>

<pre><code class="language-markup">&lt;a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image&lt;/a>
&lt;a href="#inline" data-lity>Inline&lt;/a>
&lt;a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube&lt;/a>
&lt;a href="//vimeo.com/1084537" data-lity>iFrame Vimeo&lt;/a>
&lt;a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps&lt;/a>

&lt;div id="inline" style="background:#fff" class="lity-hide">
Inline content
&lt;/div></code></pre>

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

<pre><code class="language-markup">&lt;a href="/image.html" data-lity data-lity-target="/image-preview.jpg">Image&lt;/a>
</code></pre>

    <h4>Programmatic</h4>

    <p>Use the global <code>lity</code> function to open URLs (or HTML) in a lightbox or as an event handler.</p>

    <pre><code class="language-javascript">// Open a URL in a lightbox
var lightbox = lity('//www.youtube.com/watch?v=XSGBVzeBUbk');

// Bind as an event handler (vanilla version of jQuery’s .on() delegation)
document.addEventListener('click', function(e) {
    for (var target = e.target; target && target != this; target = target.parentNode) {
        if (target.matches('[data-lightbox]')) {
            lity.call(target, e);
            break;
        }
    }
}, false);</code></pre>

    <p>If you want to close the opened lightbox, use <code>lightbox.close()</code>.</p>
</div>

<div class="wrap wrap-center">
    <p><small>Copyright (c) 2015-<script>document.write(new Date().getFullYear());</script> Jan Sorgalla. Released under the MIT license.</small></p>
</div>

<a href="https://github.com/jsor/lity"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

<script src="dist/lity.js"></script>
<script src="dist/plugins/googlemaps/googlemaps.js"></script>
<script src="dist/plugins/vimeo/vimeo.js"></script>
<script src="dist/plugins/youtube/youtube.js"></script>

<script src="assets/prism.js"></script>
</body>
</html>