Framework7 - Modelli di browser di foto

Descrizione

Framework7 fornisce molti modelli di browser di foto, che puoi trasmettere all'inizializzazione del browser di foto.

Modello Navbar

Il codice seguente mostra un esempio di template navbar, che puoi passare nel parametro 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>

Il modello sopra utilizza le classi, elencate di seguito:

  • <a class = "photo-browser-close-link">- Questo collegamento chiuderà il browser delle foto al clic. Non solo chiude il popup o la pagina, ma scollega anche tutti i listener di eventi.

  • <span class = "photo-browser-current">- Il browser delle foto inserirà il numero di indice della diapositiva attualmente attiva nell'elemento con classe photo-browser-current .

  • <span class = "photo-browser-total">- Il browser delle foto inserirà il numero totale di immagini nell'elemento con il totale del browser delle foto della classe .

Modello barra degli strumenti

Il codice seguente mostra un esempio del modello della barra degli strumenti, che è possibile passare nel parametro 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>

Il modello sopra indicato utilizza le classi elencate di seguito:

  • <a class = "photo-browser-next"> - Funziona come il pulsante Avanti.

  • <a class = "photo-browser-prev"> - Funziona come il pulsante Precedente.

Modello di elemento fotografico

Il codice seguente mostra il modello di esempio di un singolo elemento di diapositiva di foto, che puoi passare nel parametro photoTemplate -

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

Modello di elemento foto pigro

Il codice seguente mostra il modello di esempio di un singolo elemento di diapositiva di foto, che puoi passare nel parametro 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>

Modello elemento oggetto

Il codice seguente mostra il modello di esempio di un singolo elemento di diapositiva di foto, che puoi passare nel parametro objectTemplate -

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

Modello di didascalia singola

Il codice seguente mostra il modello di esempio di un singolo elemento didascalia, che puoi passare nel parametro captionTemplate -

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