Photo Browser Vue Component

Photo Browser Vue Component

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

Photo Browser Vue component represents Framework7’s Photo Browser component.

Photo Browser Vue component doesn’t render any output. It can be used to create JS Photo Browser instance and control it inside of your Vue component.

Photo Browser Component

There are following components included:

f7-photo-browser

Photo Browser Properties

You can pass all parameters in single params property or use separate props for each parameter to specify them via component properties:

Prop	Type	Default	Description
<f7-photo-browser> properties
init	boolean	true	Initializes Photo Browser
params	Object		Object with Photo Browser parameters
photos	array	[]	Array with URLs of photos or array of objects with “url” (or “html”) and “caption” properties.
url	string	photos/	Photo browser modal URL that will be set as a current route
routable-modals	boolean	true	Will add opened photo browser to router history which gives ability to close photo browser by going back in router history and set current route to the photo browser modal
swiper	object		Object with Swiper parameters. By default equals to: `swiper: {` `initialSlide: 0,` `spaceBetween: 20,` `speed: 300,` `loop: false,` `preloadImages: true,` `navigation: {` `nextEl: ‘.photo-browser-next’,` `prevEl: ‘.photo-browser-prev’,` `},` `zoom: {` `enabled: true,` `maxRatio: 3,` `minRatio: 1,` `},` `lazy: {` `enabled: true,` `},` `},`
virtualSlides	boolean	true	When enabled then Swiper will use Virtual Slides
exposition	boolean	true	Enable disable exposition mode when clicking on Photo Browser.
exposition-hide-captions	boolean	false	Set to true if you also want to hide captions in exposition mode
swipe-to-close	boolean	true	You can close Photo Browser with swipe up/down when this parameter is enabled
type	string	standalone	Define how Photo Browser should be opened. Could be `standalone` (will be opened as an overlay with custom transition effect), `popup` (will be opened as popup), `page` (will be injected to View and loaded as a new page).
theme	string	light	Photo Browser color theme, could be `light` or `dark`
captions-theme	string		Captions color theme, could be also `dark` or `light`. By default, equal to “theme” parameter
navbar	boolean	true	Set to false to remove Photo Browser’s Navbar
toolbar	boolean	true	Set to false to remove Photo Browser’s Toolbar
page-back-link-text	string	Back	Text on back link in Photo Browser’s navbar
popup-close-link-text	string	Close	Text on close link in Photo Browser’s navbar when opened in Popup or as Standalone
navbar-show-count	boolean	undefined	Defines should it display “3 of 5” text in navbar title or not. If not specified (undefined) then it will show this text if there is more than 1 item
navbar-of-text	string	of	Text of “of” in photos counter: “3 of 5”
icons-color	string		One of the default colors

Photo Browser Events

Event	Description
<f7-photo-browser> events
photobrowser:open	Event will be triggered on Photo Browser open.
photobrowser:opened	Event will be triggered after Photo Browser completes its opening animation
photobrowser:close	Event will be triggered on Photo Browser close.
photobrowser:closed	Event will be triggered after Photo Browser completes its closing animation
photobrowser:swipetoclose	This event will be triggered when user close Photo Browser with swipe up/down.

Photo Browser Methods

The following Photo Browser components methods are available (e.g. by accesing it via $refs):

<f7-photo-browser> methods
.open(index);	Open Photo Browser on photo with index number equal to “index” parameter. If “index” parameter is not specified, it will be opened on last closed photo.
.close();	Close Photo Browser
.expositionToggle();	Toggle exposition mode
.expositionEnable();	Enable exposition mode
.expositionDisable();	Disable exposition mode

Access To Photo Browser Instance

You can access Photo Browser initialized instance by accessing .f7PhotoBrowser component’s property.

Examples

<template>
  <f7-page>
    <f7-navbar title="Photo Browser"></f7-navbar>
    <f7-block>
      <p>Photo Browser could be opened in a three ways - as a Standalone component (Popup modification), in Popup, and as separate Page:</p>
      <f7-row>
        <f7-col>
          <f7-photo-browser
            :photos="photos"
            ref="standalone"
          ></f7-photo-browser>
          <f7-button raised @click="$refs.standalone.open()">Standalone</f7-button>
        </f7-col>
        <f7-col>
          <f7-photo-browser
            :photos="photos"
            type="popup"
            ref="popup"
          ></f7-photo-browser>
          <f7-button raised @click="$refs.popup.open()">Popup</f7-button>
        </f7-col>
        <f7-col>
          <f7-photo-browser
            :photos="photos"
            type="page"
            back-link-text="Back"
            ref="page"
          ></f7-photo-browser>
          <f7-button raised @click="$refs.page.open()">Page</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>
    <f7-block>
      <p>Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
      <f7-row>
        <f7-col>
          <f7-photo-browser
            :photos="photos"
            theme="dark"
            ref="standaloneDark"
          ></f7-photo-browser>
          <f7-button raised @click="$refs.standaloneDark.open()">Standalone</f7-button>
        </f7-col>
        <f7-col>
          <f7-photo-browser
            :photos="photos"
            theme="dark"
            type="popup"
            ref="popupDark"
          ></f7-photo-browser>
          <f7-button raised @click="$refs.popupDark.open()">Popup</f7-button>
        </f7-col>
        <f7-col>
          <f7-photo-browser
            :photos="photos"
            theme="dark"
            type="page"
            back-link-text="Back"
            ref="pageDark"
          ></f7-photo-browser>
          <f7-button raised @click="$refs.pageDark.open()">Page</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        photos: [
          {
            url: 'img/beach.jpg',
            caption: 'Amazing beach in Goa, India',
          },
          'https://placekitten.com/1024/1024',
          'img/lock.jpg',
          {
            url: 'img/monkey.jpg',
            caption: 'I met this monkey in Chinese mountains',
          },
          {
            url: 'img/mountains.jpg',
            caption: 'Beautiful mountains in Zhangjiajie, China',
          },
        ],
      };
    },
  }
</script>

← Panel / Side Panels

Popover →