Framework7 - Plantillas de navegador de fotos

Descripción

Framework7 le proporciona muchas plantillas de navegador de fotos, que puede pasar a la inicialización del navegador de fotos.

Plantilla de barra de navegación

El siguiente código muestra un ejemplo de plantilla de barra de navegación, que puede pasar en el parámetro 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>

La plantilla anterior usa clases, que se enumeran a continuación:

<a class = "photo-browser-close-link">- Este enlace cerrará el navegador de fotos al hacer clic. No solo cierra la ventana emergente o la página, sino que también separa todos los oyentes de eventos.
<span class = "photo-browser-current">- El navegador de fotos colocará el número de índice de la diapositiva actualmente activa en un elemento con la clase photo-browser-current .
<span class = "photo-browser-total">- El navegador de fotos pondrá el número total de imágenes en el elemento con la clase photo-browser-total .

Plantilla de barra de herramientas

El siguiente código muestra un ejemplo de la plantilla de la barra de herramientas, que puede pasar en el parámetro 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>

La plantilla dada anteriormente usa clases que se enumeran a continuación:

<a class = "photo-browser-next"> - Funciona como el botón Siguiente.
<a class = "photo-browser-prev"> - Funciona como el botón Anterior.

Plantilla de elemento fotográfico

El siguiente código muestra el ejemplo de plantilla de un elemento de diapositiva de foto única, que puede pasar en el parámetro photoTemplate -

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

Plantilla de elemento de foto perezoso

El siguiente código muestra el ejemplo de plantilla de un elemento de diapositiva de foto única, que puede pasar en el parámetro 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>

Plantilla de elemento de objeto

El siguiente código muestra el ejemplo de plantilla de elemento de diapositiva de una sola foto, que puede pasar en el parámetro objectTemplate -

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

Plantilla de título único

El siguiente código muestra el ejemplo de plantilla de un elemento de título único, que puede pasar en el parámetro captionTemplate :

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

↰ Previous page