Media

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="Sharing an amazing solutions" width="350" src="imgs/sharing-green-ideas_m01.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.

One big Tagline!

Here's our small slogan.
Left Aligned Caption

Here's our small slogan.
Right Aligned Caption

Here's our small slogan.


  <div class="slider">
    <ul class="slides">
      <li>
        <img src="imgs/brackens_m169.jpg"> <!-- random image -->
        <div class="caption center-align">
          <h1 class="white-text">One big Tagline!</h1>
          <h5 class="light white-text">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="imgs/flaming_m02.jpg"> <!-- random image -->
        <div class="caption left-align">
          <h3 class="yellow-text text-accent-3">Left Aligned Caption</h3>
          <h5 class="light white-text">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="imgs/wall-clock-detail_m.jpg"> <!-- random image -->
        <div class="caption right-align">
          <h3 class="red-text text-accent-4">Right Aligned Caption</h3>
          <h5 class="light red-text text-accent-4">Here's our small slogan.</h5>
        </div>
      </li>
    </ul>
  </div>

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

jQuery Initialization


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

jQuery Plugin Options

Option Name	Description
Indicators	Set to false to hide slide indicators. (Default: True)
Height	Set height of slider. (Default: 400)
Transition	Set the duration of the transition animation in ms. (Default: 500)
Interval	Set the duration between transitions in ms. (Default: 6000)

jQuery Plugin Methods

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


// Pause slider
$('.slider').slider('pause');
// Start slider
$('.slider').slider('start');
// Next slide
$('.slider').slider('next');
// Previous slide
$('.slider').slider('prev');

For more detailed informations please visit: http://materializecss.com/media.html