Framework7 - Modèles de navigateur de photos

La description

Framework7 vous fournit de nombreux modèles de navigateur de photos, que vous pouvez transmettre à l'initialisation du navigateur de photos.

Modèle de barre de navigation

Le code suivant montre un exemple de modèle de barre de navigation, que vous pouvez passer dans le paramètre 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>

Le modèle ci-dessus utilise des classes, répertoriées ci-dessous -

  • <a class = "photo-browser-close-link">- Ce lien fermera le navigateur de photos au clic. Non seulement il ferme la fenêtre contextuelle ou la page, mais il détache également tous les écouteurs d'événements.

  • <span class = "photo-browser-current">- Le navigateur de photos placera le numéro d'index de la diapositive actuellement active dans l'élément avec la classe photo-browser-current .

  • <span class = "photo-browser-total">- Le navigateur photo placera le nombre total d'images dans l'élément avec la classe photo-browser-total .

Modèle de barre d'outils

Le code suivant montre un exemple du modèle de barre d'outils, que vous pouvez passer dans le paramètre 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>

Le modèle ci-dessus utilise des classes répertoriées ci-dessous -

  • <a class = "photo-browser-next"> - Cela fonctionne comme le bouton Suivant.

  • <a class = "photo-browser-prev"> - Cela fonctionne comme le bouton Précédent.

Modèle d'élément photo

Le code suivant montre l'exemple de modèle d'élément de diapositive de photo unique, que vous pouvez transmettre dans le paramètre photoTemplate -

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

Modèle d'élément photo paresseux

Le code suivant montre l'exemple de modèle d'élément de diapositive de photo unique, que vous pouvez transmettre dans le paramètre 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>

Modèle d'élément d'objet

Le code suivant montre l'exemple de modèle d'élément de diapositive de photo unique, que vous pouvez transmettre dans le paramètre objectTemplate -

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

Modèle de légende unique

Le code suivant montre l'exemple de modèle d'élément de légende unique, que vous pouvez passer dans le paramètre captionTemplate -

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