Material 盒子

Material 盒子是来源于Lightbox插件的material design。当用户单击图片它会变大。Material 盒子平滑的使图片居中并且变大。再次单击还原。或者通过ESC键。

创建上面图片的效果，只要增加一个materialboxed类到图片标签中。

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

初始化

Material盒子是自动初始化的。然而如果你想动态的增加图片，你需要增加这个初始化代码。

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

标题

给相片添加一个短标题是很容易的。只要增加这个标题作为data-caption属性值。

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

轮播

这是一个简单优雅的图片轮播。你可以让轮播的图片带标题，设置标题的对齐方式。你也可以设置显示轮播底部的指标。

注意:这也兼容Hammer.js，试着用用你的手指来滚动图片。

  <div class="slider">
    <ul class="slides">
      <li>
        <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
        <div class="caption center-align">
          <h3>这是一个巨大的标签行</h3>
          <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
        </div>
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
        <div class="caption left-align">
          <h3>左对齐标题</h3>
          <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
        </div>
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
        <div class="caption right-align">
          <h3>右对齐标题</h3>
          <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
        </div>
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
        <div class="caption center-align">
          <h3>这是一个巨大的标签行</h3>
          <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
        </div>
      </li>
    </ul>
  </div>
      

全屏轮播

你可以使这个轮播作为全屏轮播通过增加类fullscreen到轮播的div中，这是一个快速入门的例子。

打开示例

jQuery 初始化

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

jQuery 插件选项

选项名称	描述
Indicators	设置为false隐藏轮播的指标。(默认: True)
Height	设置轮播的高度 (默认: 400)
Transition	设置一次轮播动画过渡的时间（毫秒）。(默认: 500)
Interval	设置轮播之间转换的时间（毫秒） (Default: 6000)

jQuery 插件方法

我们提供了中止、启动、移动到下一幕、上一幕的方法。

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