Media Content

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.

Initialization

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.materialboxed');
    var instances = M.Materialbox.init(elems, options);
  });

  // Or with jQuery

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

Options

Methods

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:

Copy

var instance = M.Materialbox.getInstance(elem);

/* jQuery Method Calls
You can still use the old jQuery plugin method calls.
But you won't be able to access instance properties.

$('.materialboxed').materialbox('methodName');
$('.materialboxed').materialbox('methodName', paramName);
*/

.open();

Open materialbox

instance.open();

.close();

Close materialbox

instance.close();

.destroy();

Destroy plugin instance and teardown

instance.destroy();

Properties

Captions

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

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.

This is our big Tagline!

Here's our small slogan.

Left Aligned Caption

Here's our small slogan.

Right Aligned Caption

Here's our small slogan.

This is our big Tagline!

Here's our small slogan.

<div class="slider">
    <ul class="slides">
      <li>
         <!-- random image -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
         <!-- random image -->
        <div class="caption left-align">
          <h3>Left Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
         <!-- random image -->
        <div class="caption right-align">
          <h3>Right Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
         <!-- random image -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
    </ul>
  </div>

Initialization

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.slider');
    var instances = M.Slider.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.slider').slider();
  });

Options

Methods

We have methods to pause, start, move to next and move to previous slide.

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:

Copy

var instance = M.Slider.getInstance(elem);

/* jQuery Method Calls
You can still use the old jQuery plugin method calls.
But you won't be able to access instance properties.

$('.slider').slider('methodName');
$('.slider').slider('methodName', paramName);
*/

.pause();

Pause slider autoslide

instance.pause();

.start();

Start slider autoslide

instance.start();

.next();

Move to next slider

instance.next();

.prev();

Move to prev slider

instance.prev();

.destroy();

Destroy plugin instance and teardown

instance.destroy();

Properties

Fullscreen Slider

You can easliy make this slider a fullscreen slider by adding the class fullscreen to the slider div. Here's a quick demo.

Open Demo