materialize-css

<div class="container"> <div class="row"> <div class="col s12 m9 l10"> <p class="caption">Media components include things that have to do with large media objects like Images, Video, Audio, etc.</p> <div id="materialbox" class="scrollspy section"> <h2 class="header">Material Box</h2> <p class="caption">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.</p> <img class="materialboxed responsive-img" width="650" src="images/sample-1.jpg"> <p>Creating the above image with the effect is as simple as adding a <code class="language-markup">materialboxed</code> class to the image tag.</p> <pre><code class="language-markup"> <img class="materialboxed" width="650" src="images/sample-1.jpg"> </code></pre> <h4>Initialization</h4> <p>Materialbox is intialized automatically. However, if you add images dynamically, you will have to add this initialization code.</p> <pre><code class="language-javascript"> $(document).ready(function(){ $('.materialboxed').materialbox(); }); </code></pre> <h4>Captions</h4> <p>It is very easy to add a short caption to your photo. Just add the caption as a <code class="language-markup">data-caption</code> attribute.</p> <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"> <pre><code class="language-markup"> <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"> </code></pre> </div> <br>  <div id="slider" class="scrollspy section"> <h3 class="header">Slider</h3> <p class="caption">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. </p> <p>Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the slider.</p><br> <div class="slider"> <ul class="slides"> <li> <img src="http://lorempixel.com/580/250/nature/1">  <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">  <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">  <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">  <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><br> <pre><code class="language-markup"> <div class="slider"> <ul class="slides"> <li> <img src="http://lorempixel.com/580/250/nature/1">  <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">  <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">  <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">  <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> </code></pre> <br> <h4>Fullscreen Slider</h4> <p>You can easliy make this slider a fullscreen slider by adding the class <code class="language-markup">fullscreen</code> to the slider div. Here's a quick demo.</p> <a href="fullscreen-slider-demo.html" target="_blank" class="btn-large waves-effect waves-light">Open Demo</a> <br> <h4>jQuery Initialization</h4> <pre><code class="language-javascript"> $(document).ready(function(){ $('.slider').slider({full_width: true}); }); </code></pre> <br> <h4>jQuery Plugin Options</h4> <table class="highlight"> <thead> <tr> <th>Option Name</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Indicators</td> <td>Set to false to hide slide indicators. (Default: True)</td> </tr> <tr> <td>Height</td> <td>Set height of slider. (Default: 400)</td> </tr> <tr> <td>Transition</td> <td>Set the duration of the transition animation in ms. (Default: 500)</td> </tr> <tr> <td>Interval</td> <td>Set the duration between transitions in ms. (Default: 6000)</td> </tr> </tbody> </table> <br> <h4>jQuery Plugin Methods</h4> <p>We have methods to pause, start, move to next and move to previous slide.</p> <pre><code class="language-javascript col s12"> // Pause slider $('.slider').slider('pause'); // Start slider $('.slider').slider('start'); // Next slide $('.slider').slider('next'); // Previous slide $('.slider').slider('prev'); </code></pre> </div> </div>  <div class="col hide-on-small-only m3 l2"> <div class="toc-wrapper"> <div class="buysellads hide-on-small-only">  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script> </div> <div style="height: 1px;"> <ul class="section table-of-contents"> <li><a href="#materialbox">Material Box</a></li> <li><a href="#slider">Slider</a></li> </ul> </div> </div> </div> </div> </div>