<!DOCTYPE html> <html>

<head>
        <title>jQuery.LiteBox Example</title>

        <!-- needed to ensure correct scale on mobile -->
        <meta name="viewport" content="width=500, initial-scale=1">

        <script src="jquery.min.js"/></script>

        <link rel="stylesheet" href="../dist/jquery.litebox.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="../dist/jquery.litebox.gallery.css" type="text/css" media="screen" />
        <script src="../dist/jquery.litebox.js"></script>

        <script>
                jQuery(function($) {
                        $('figure.photo a').litebox();
                });
        </script>

        <style>
                /* General */
                html {
                        font-family: "PT Sans", Verdana, Helvetica, Arial, sans-serif;
                        font-size: 3.0vw;
                }

                /* When window is wide enough, this applies */
                @media (min-width: 30em) {
                        html {
                                font-size: 1em;
                        }
                }

                h1 {
                        margin: 2rem;
                }
        </style>
</head>
<body>
        <h1>jQuery.LiteBox Example</h1>

        <div class="gallery">
                <figure class="photo">
                        <a href="sample_images/large/IMG_3341.jpg">
                                <picture>
                                        <source srcset="sample_images/small/IMG_3341.jpg, sample_images/medium/IMG_3341.jpg 2x"/>
                                        <img src="sample_images/small/IMG_3341.jpg"/>
                                </picture>
                        </a>
                        <figcaption>Using the picture element for 1x and 2x resolution.</figcaption>
                </figure>

                <figure class="photo">
                        <a href="sample_images/large/IMG_3344.jpg" class="thumbnail">
                                <img src="sample_images/small/IMG_3344.jpg"/>
                        </a>
                        <figcaption>The forest in South Japan.</figcaption>
                </figure>

                <figure class="photo">
                        <a href="sample_images/large/IMG_3351.jpg" class="thumbnail">
                                <img src="sample_images/small/IMG_3351.jpg"/>
                        </a>
                        <figcaption>We went walking in Miyazaki, in the rain. It was beautiful. We could see frogs everywhere.</figcaption>
                </figure>
        </div>
</body>

</html>