Photo Browser

Photo Browser is a photo browser component to display collection of photos / images. Photos can be zoomed and panned (optional).

Photo Browser uses Swiper Slider component to slide between photos.

Let’s look at related App methods to work with Photo Browser:

app.photoBrowser.create(parameters)- create Photo Browser instance

• parameters - object. Object with photo browser parameters

app.photoBrowser.destroy(el)- destroy Photo Browser instance

• el - HTMLElement or string (with CSS Selector) or object. Photo Browser element or Photo Browser instance to destroy.

app.photoBrowser.get(el)- get Photo Browser instance by HTML element

• el - HTMLElement or string (with CSS Selector). Photo Browser element.

Method returns Photo Browser’s instance

For example:

Note that all following parameters can be used in global app parameters under photoBrowser property to set defaults for all photo browsers. For example:

var app = new Framework7({
    type: 'popup',
  }
});

When we initialize Photo Browser we need to pass array with photos/videos in photos parameter. Let’s look at different variations of this array:

After we initialize Photo Browser we have its initialized instance in variable (like photoBrowser variable in examples above) with helpful methods and properties:

Photo Browser will fire the following DOM events on photo browser element and events on app and photo browser instance:

<div class="page-content">
  <div class="block-title">Light Theme</div>
  <div class="block row">
    <div class="col-33"><a href="#" class="button pb-standalone">Standalone</a></div>
    <div class="col-33"><a href="#" class="button pb-popup">Popup</a></div>
    <div class="col-33"><a href="#" class="button pb-page">Page</a></div>
  </div>
  <div class="block-title">Dark Theme</div>
  <div class="block row">
    <div class="col-50"><a href="#" class="button pb-standalone-dark">Standalone</a></div>
    <div class="col-50"><a href="#" class="button pb-popup-dark">Popup</a></div>
  </div>