Let there be Light – Lity Lightbox

A lot of our sites require some lightbox functionality. I prefer to use Jan Sorgalla’s Lity. It is fast, responsive, and works right out of the box. You can read up on the specific uses on his site, but the general gist of it is super simple:

Let’s say we want to have a link that opens a lightbox with a YouTube video in it.

1. Link the Lity CSS and Javascript files ( requires jQuery )
   
   <link href="css/lity.css" rel="stylesheet"> <script src="js/jquery.js"></script> <script src="js/lity.js"></script>

   1 2 3

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

2. Add a link to a piece of text, button, image, etc with the href of the YouTube URL:
   
   <a href="https://www.youtube.com/watch?v=EI0ib1NErqg">Check this out!</a>

   1	<a href="https://www.youtube.com/watch?v=EI0ib1NErqg">Check this out!</a>

3. Simply add a “data-lity” parameter to the anchor tag:
   
   <a href="https://www.youtube.com/watch?v=EI0ib1NErqg" data-lity>Check this out!</a>

   1	<a href="https://www.youtube.com/watch?v=EI0ib1NErqg" data-lity>Check this out!</a>

That’s it! Clicking on the link should show a size transition leading to a lightbox that plays your video:

You can also link to images, google maps, inline content, and other website urls. Illuminating.