Media components include things that have to do with large media objects like Images, Video, Audio, etc.

Material Box

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 above image with the effect is as simple as adding a materialboxed class to the image tag.

<img class="materialboxed" width="650" src="images/sample-1.jpg">

Initialization

Materialbox is intialized automatically. However, if you add images dynamically, you will have to add this initialization code.

$(document).ready(function(){
$('.materialboxed').materialbox();
});

Captions

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

<img class="materialboxed" data-caption="A picture of some deer and tons of trees" width="250" src="http://th01.deviantart.net/fs70/PRE/i/2013/126/1/e/nature_portrait_by_pw_fotografie-d63tx0n.jpg">

Slider

Our slider is a simple and elegant image carousel. You can also have captions that will be transitioned on their own depending on their alignment. You can also have indicators that show up on the bottom of the slider.

Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the slider.

Help Materialize Grow

We hope you have enjoyed using Materialize! If you feel Materialize has helped you out and want to support the team, send us over a donation! Any amount would help support and continue development on this project and is greatly appreciated.

Join the Discussion

We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.