Use the HTML5 custom data attribute data-lightbox to activate the lightbox. For example:

<a data-lightbox="on" href="image_lb.jpg"><img src="image.jpg" width="180" height="120" alt="" /></a>

If you want to create a group for your images or videos use the group parameter. For example:

<a data-lightbox="group:mygroup" href="image1_lb.jpg"><img src="image1.jpg" width="180" height="120" alt="" /></a>
<a data-lightbox="group:mygroup" href="image2_lb.jpg"><img src="image2.jpg" width="180" height="120" alt="" /></a>

You can set various other lightbox parameters to the data attribute. For example:

<a data-lightbox="transitionIn:elastic;transitionOut:elastic;" href="http://www.google.com">Lightbox</a>

Here is a list of common parameters:

• titlePosition - How should the titlte show up? (float, outside, inside or over)
• transitionIn - Set a opening transition. (fade, elastic, or none)
• transitionOut - Set a closing transition (fade, elastic, or none)
• overlayShow - Set to true or false
• width - Set a width in pixel
• height - Set a height in pixel
• padding - Set a padding in pixel