1. WIKI教程
2. 学习Framework7
3. 照片浏览器模板(Photo Browser Templates)

照片浏览器模板(Photo Browser Templates)

描述 (Description)

Framework7为您提供了许多照片浏览器模板，您可以将其传递给照片浏览器初始化。

导航栏模板

以下代码显示了navbar模板的示例，您可以在navbarTemplate参数中传递该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参数中传递该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"》 - 它的工作方式与Previous按钮相同。

照片元素模板

以下代码显示了单张照片幻灯片元素的模板示例，您可以在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>