Framework7 - Photo Browser Templates

---

---

Description

Framework7 provides you many photo browser templates, which you can pass on to the photo browser initialization.

Navbar Template

The following code shows an example of navbar template, which you can pass in navbarTemplate parameter −

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

The above template uses classes, which are listed below −

• <a class = "photo-browser-close-link"> − This link will close the photo browser on click. Not only does it close the popup or the page, but it also detaches all events listeners.

• <span class = "photo-browser-current"> − The photo browser will put the index number currently active slide into element with class photo-browser-current.

• <span class = "photo-browser-total"> − The photo browser will put the total number of images into the element with class photo-browser-total.

Toolbar Template

The following code shows an example of the toolbar template, which you can pass in toolbarTemplate parameter −

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

The above given template uses classes which are listed below −

• <a class = "photo-browser-next"> − It works like the Next button.

• <a class = "photo-browser-prev"> − It works like the Previous button.

Photo Element Template

The following code shows the template example of single photo slide element, which you can pass in photoTemplate parameter −

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

Lazy Photo Element Template

The following code shows the template example of single photo slide element, which you can pass in lazyPhotoTemplate parameter −

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

Object Element Template

The following code shows the template example of single photo slide element, which you can pass in objectTemplate parameter −

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

Single Caption Template

The following code shows the template example of single caption element, which you can pass in captionTemplate parameter −

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