多媒体



多媒体模块包含了大部分的多媒体模块像是图片,音频,视频,等等。

Material图片盒子

Material图片盒子是一个轻量级的图片展示框架。 当用户点击的时候图片会放大。使图片在整个屏幕居中并放大,且这个动画效果是极度平滑的。当图片处于放大状态下只需再点击一次图片或者滚动滑轮或者按下ESC键就可以复原。

只需在img标签上添加一个materialboxed即可。


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

初始化

Materialbox 会自动初始化,但是当你动态添加的时候就要手动初始化了。


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

轮播

这个轮播模块简单且优雅,你可以添加一个具有动态飞入效果的标题,还可以添加一个页码指示器来指明现在展示的是哪一张图片。

Note:这个完全用Hammer.js做了移动端的滑动适配!试着在手机浏览器上滑动图片。


  • 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>
         <img src="http://lorempixel.com/580/250/nature/1"> <!-- 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>
         <img src="http://lorempixel.com/580/250/nature/2"> <!-- 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>
         <img src="http://lorempixel.com/580/250/nature/3"> <!-- 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>
         <img src="http://lorempixel.com/580/250/nature/4"> <!-- 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>
      

全屏轮播

添加一个fullscreencalss就能让轮播全屏,看例子。

全屏演示

初始化


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

选项

名称 描述
Indicators(指示器) 是否显示指示器 (Default: True)
Height(高度) 轮播图高度 (Default: 400)
Transition(动画) 设置动画时间 (Default: 500)
Interval(轮播间隔) 设置图片之间动画时间间隔 (Default: 6000)