Media with JavaScript

Material box is a material design implementation of the Lightbox plugin. When a user clicks on an image that can be enlarged, Material box centers the image and enlarges it in a smooth, non-jarring manner. To dismiss the image, the user can either click on the image again, scroll away, or press the ESC key.

Creating the below image with the effect is as simple as adding a materialboxedclass to the image tag.

<img class="materialboxed" width="450" src="../assets/images/nature2.jpg">

It is very easy to add a short caption to your photo. Just add the caption as a data-captionattribute.

<img class="materialboxed" data-caption="A picture of a way with a group of trees in a park" width="250" src="../assets/images/nature4.jpg">