<!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>