Materialize JS Media

Materialize JS media components specify 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, it is enlarged. Material box centers the image and enlarges it in a smooth, non-jarring manner. If you want to dismiss the image, you can either click on the image again, scroll away, or press the ESC key.

JavaScript

  <script>$(document).ready(function(){      $(‘.materialboxed’).materialbox();    });</script>  

Example

Let’s take an example to demonstrate media (image) in Material box.

  <!DOCTYPE html>  <html>     <head>        <title>The Materialize Cards Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                   <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>      </head>      <body class = “container”>       <img class=”materialboxed” width=”650″ src=”https://lorempixel.com/250/250/nature/2″></img>  <script>$(document).ready(function(){      $(‘.materialboxed’).materialbox();    });</script>     </body>     </html>  

Test it Now

Output:

Captions

You can very easily add a short caption to your photo. Just add the caption as a data-caption attribute.

Example

  <!DOCTYPE html>  <html>     <head>        <title>The Materialize Cards Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                   <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>      </head>      <body class = “container”>       <img class=”materialboxed” data-caption=”A picture of a way with a group of trees in a park” width=”250″ src=”https://lorempixel.com/800/400/nature/4″>     <script>$(document).ready(function(){      $(‘.materialboxed’).materialbox();    });</script>     </body>     </html>  

Test it Now

Output:

Slider

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.

  <!DOCTYPE html>  <html>     <head>        <title>The Materialize Cards Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                   <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>      </head>      <body class = “container”>        <div class=”slider”>      <ul class=”slides”>        <li>          <img src=”https://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=”https://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=”https://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=”https://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>  <script>$(document).ready(function(){        $(‘.slider’).slider();      });</script>     </body>     </html>  

Test it Now

Output:

Next TopicMaterialize CSS Collapsible

Materialize CSS JS Media

Materialize JS Media

Material Box

Example

Captions

Example

Slider

Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the slider.

Sticky Notes for Ubuntu

Azure Portal Overview

You may also like