Media

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

Note: this page contains some errors that need to addressed

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">
          

Material Box Gallery

Material box gallery works just like Material Box, but it lets you group multiple images together in a clickable/swipable gallery. To dismiss the gallery, 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, and wrapping the entire image group in an element with data-gallery="mygalleryname". To include multiple galleries on one page, just wrap each image group in a unique data-gallery attribute.

        <div data-gallery="featuredGallery">
          <img class="materialboxedgallery responsive-img" src="sample-image-1.jpg">
          <img class="materialboxedgallery responsive-img" src="sample-image-2.jpg">
          <img class="materialboxedgallery responsive-img" src="sample-image-3.jpg">
        </div>
      

Initialization

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

          $(document).ready(function(){
            $('.materialboxedgallery').materialboxgallery();
          });
      

Captions

It is very easy to add a short caption to your photos. 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">