Wednesday, September 14, 2016

Lightbox effect made easy with litty

So you want to make a webpage that when you click a button, a youtube video frame will overlay the current windows instead of opening in a new screen. Lightbox effect is what you want to achieve. But it sounds like something fancy and would take a lot of javascript-fu to implement it. Fortunately, we have Lity.

Official website:

Here is how to use it:

1. Download the distribute package of litty from github. You only need 2 files: lity.js and lity.css from  the dist directory.

2. Include the library in your web page (and jQuery):

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

3. Add data-lity to your link tag:

<a href="" data-lity>Youtube</a>

4. Bind the click event:

$(document).on('click', '[data-my-lightbox]', lity);