メディア - Materialize

メディアコンポーネントには、画像、ビデオ、オーディオなど、大きなメディアオブジェクトに関するものが含まれます。

Material Boxは、ライトボックスプラグインのマテリアルデザイン実装です。ユーザーが拡大できる画像をクリックすると、Material Boxは画像を中央に配置して、滑らかでぎこちなくない方法で拡大します。画像を閉じるには、画像をもう一度クリックするか、スクロールするか、ESCキーを押します。

上記の画像を効果と共に作成するには、画像タグにmaterialboxedクラスを追加するだけです。


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

初期化


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.materialboxed');
    var instances = M.Materialbox.init(elems, options);
  });

  // Or with jQuery

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

オプション

名前	型	デフォルト値	説明
inDuration	数値	275	ミリ秒単位のトランジションインの継続時間。
outDuration	数値	200	ミリ秒単位のトランジションアウトの継続時間。
onOpenStart	関数	null	materialboxが開かれる前に呼び出されるコールバック関数。
onOpenEnd	関数	null	materialboxが開かれた後に呼び出されるコールバック関数。
onCloseStart	関数	null	materialboxが閉じられる前に呼び出されるコールバック関数。
onCloseEnd	関数	null	materialboxが閉じられた後に呼び出されるコールバック関数。

メソッド

jQueryはもはや依存関係ではないため、すべてのメソッドはプラグインインスタンスで呼び出されます。プラグインインスタンスは次のように取得できます。
    var instance = M.Materialbox.getInstance(elem);

    /* jQuery Method Calls
      You can still use the old jQuery plugin method calls.
      But you won't be able to access instance properties.

      $('.materialboxed').materialbox('methodName');
      $('.materialboxed').materialbox('methodName', paramName);
    */
          

.open();

Material Boxを開く


  instance.open();

.close();

Material Boxを閉じる


  instance.close();

.destroy();

プラグインインスタンスを破棄し、終了処理を行う


  instance.destroy();

プロパティ

名前	型	説明
el	要素	プラグインが初期化されたDOM要素。
options	オブジェクト	インスタンスが初期化されたオプション。
overlayActive	ブール値	Material Boxのオーバーレイが表示されているかどうか。
doneAnimating	ブール値	カルーセルがアニメーションされなくなったかどうか。
caption	文字列	指定されている場合のキャプション。
originalWidth	数値	画像の元の幅。
originalHeight	数値	画像の元の高さ。

キャプション

写真に短いキャプションを追加するのは非常に簡単です。data-caption属性としてキャプションを追加するだけです。


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

当社のスライダーは、シンプルでエレガントな画像カルーセルです。キャプションを含めることもでき、配置に応じて個別にトランジションされます。また、スライダーの下部に表示されるインジケーターを含めることもできます。

これが当社の大きなキャッチコピーです！

これが当社の小さなスローガンです。
左寄せキャプション

これが当社の小さなスローガンです。
右寄せキャプション

これが当社の小さなスローガンです。
これが当社の大きなキャッチコピーです！

これが当社の小さなスローガンです。


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

初期化


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.slider');
    var instances = M.Slider.init(elems, options);
  });

  // Or with jQuery

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

オプション

名前	型	デフォルト値	説明
indicators	ブール値	true	スライドインジケーターを非表示にするにはfalseに設定します。
height	数値	400	スライダーの高さを設定します。
duration	数値	500	トランジションアニメーションの継続時間をミリ秒単位で設定します。
interval	数値	6000	トランジション間の継続時間をミリ秒単位で設定します。

メソッド

一時停止、開始、次のスライドへの移動、前のスライドへの移動を行うメソッドがあります。

jQueryはもはや依存関係ではないため、すべてのメソッドはプラグインインスタンスで呼び出されます。プラグインインスタンスは次のように取得できます。
    var instance = M.Slider.getInstance(elem);

    /* jQuery Method Calls
      You can still use the old jQuery plugin method calls.
      But you won't be able to access instance properties.

      $('.slider').slider('methodName');
      $('.slider').slider('methodName', paramName);
    */
          

.pause();

スライダーの自動スライドを一時停止


  instance.pause();

.start();

スライダーの自動スライドを開始


  instance.start();

.next();

次のスライダーに移動


  instance.next();

.prev();

前のスライダーに移動


  instance.prev();

.destroy();

プラグインインスタンスを破棄し、終了処理を行う


  instance.destroy();

プロパティ

名前	型	説明
el	要素	プラグインが初期化されたDOM要素。
options	オブジェクト	インスタンスが初期化されたオプション。
activeIndex	数値	現在のスライドのインデックス。