Framework7-フォトブラウザーテンプレート

説明

Framework7には多くのフォトブラウザーテンプレートが用意されており、フォトブラウザーの初期化に渡すことができます。

Navbarテンプレート

次のコードは、_navbarTemplate_パラメータで渡すことができるnavbarテンプレートの例を示しています-

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left sliding">
         <a href = "#" class = "link close-popup photo-browser-close-link {{#unless backLinkText}}icon-only{{/unless}} {{js "this.type  =  =  =  \'page\' ? \'back\' : \'\'"}}">
            <i class = "icon icon-back {{iconsColorClass}}"></i>
            {{#if backLinkText}}<span>{{backLinkText}}</span>{{/if}}
         </a>
      </div>

      <div class = "center sliding">
         <span class = "photo-browser-current"></span>
         <span class = "photo-browser-of">{{ofText}}</span>
         <span class = "photo-browser-total"></span>
      </div>
      <div class = "right"></div>
   </div>
</div>

上記のテンプレートは、以下にリストされているクラスを使用します-

<a class = "photo-browser-close-link"> -このリンクをクリックすると、フォトブラウザーが閉じます。ポップアップまたはページを閉じるだけでなく、すべてのイベントリスナーを切り離します。
<span class = "photo-browser-current"> -写真ブラウザは、現在アクティブなスライドのインデックス番号を_photo-browser-current_クラスの要素に配置します。
<span class = "photo-browser-total"> -写真ブラウザは、_photo-browser-total_クラスの要素に画像の総数を入れます。

ツールバーテンプレート

次のコードは、_toolbarTemplate_パラメータで渡すことができるツールバーテンプレートの例を示しています-

<div class = "toolbar tabbar">
   <div class = "toolbar-inner">
      <a href = "#" class = "link photo-browser-prev">
         <i class = "icon icon-prev {{iconsColorClass}}"></i>
      </a>

      <a href = "#" class = "link photo-browser-next">
         <i class = "icon icon-next {{iconsColorClass}}"></i>
      </a>
   </div>
</div>

上記のテンプレートは、以下にリストされているクラスを使用します-

<a class = "photo-browser-next"> -[次へ]ボタンのように機能します。
<a class = "photo-browser-prev"> -[前へ]ボタンのように機能します。

写真要素テンプレート

次のコードは、_photoTemplate_パラメータで渡すことができる単一の写真スライド要素のテンプレートの例を示しています-

<div class = "photo-browser-slide swiper-slide">
   <span class = "photo-browser-zoom-container">
      <img src = "{{js "this.url || this"}}">
   </span>
</div>

怠zyな写真要素テンプレート

次のコードは、_lazyPhotoTemplate_パラメータで渡すことができる単一の写真スライド要素のテンプレート例を示しています-

<div class = "photo-browser-slide photo-browser-slide-lazy swiper-slide">
   <div class = "preloader {{@root.preloaderColorClass}}">
      {{#if @root.material}}
         {{@root.materialPreloaderSvg}}
      {{/if}}
   </div>

   <span class = "photo-browser-zoom-container">
      <img data-src = "{{js "this.url || this"}}" class = "swiper-lazy">
   </span>
</div>

オブジェクト要素テンプレート

次のコードは、_objectTemplate_パラメータで渡すことができる単一の写真スライド要素のテンプレート例を示しています-

<div class = "photo-browser-slide photo-browser-object-slide swiper-slide">
   {{js "thisl || this"}}
</div>

シングルキャプションテンプレート

次のコードは、_captionTemplate_パラメータで渡すことができる単一のキャプション要素のテンプレートの例を示しています-

<div class = "photo-browser-caption" data-caption-index = "{{@index}}">
   {{caption}}
</div>

Framework7-photo-browser-templates

目次