Framework7 - 照片瀏覽器模板

---

---

描述

Framework7 提供了許多照片瀏覽器模板，您可以將其傳遞給照片瀏覽器初始化。

導航欄模板

以下程式碼顯示了導航欄模板示例，您可以將其傳遞給 navbarTemplate 引數：

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

懶載入照片元素模板

以下程式碼顯示了單個照片幻燈片元素的模板示例，您可以將其傳遞給 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 "this.html || this"}}
</div>

單個標題模板

以下程式碼顯示了單個標題元素的模板示例，您可以將其傳遞給 captionTemplate 引數：

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