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:

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:

PropTypeDefaultDescription
<f7-photo-browser> properties
initbooleantrueInitializes Photo Browser
paramsObjectObject with Photo Browser parameters
photosarray[]Array with URLs of photos or array of objects with "url" (or "html") and "caption" properties.
thumbsarray[]Array with URLs of thumbs images. Will not render thumbs if not specified, or empty array
urlstringphotos/Photo browser modal URL that will be set as a current route
routable-modalsbooleanfalseWill 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
swiperobjectObject with Swiper parameters. By default equals to:
swiper: {
  initialSlide: 0,
  spaceBetween: 20,
  speed: 300,
  loop: false,
  preloadImages: true,
  keyboard: {
    enabled: true,
  },
  navigation: {
    nextEl: '.photo-browser-next',
    prevEl: '.photo-browser-prev',
  },
  zoom: {
    enabled: true,
    maxRatio: 3,
    minRatio: 1,
  },
  lazy: {
    enabled: true,
  },
},
virtual-slidesbooleantrueWhen enabled then Swiper will use Virtual Slides
close-by-backdrop-clickbooleantrueWhen enabled, Photo Browser popup will be closed on backdrop click
expositionbooleantrueEnable disable exposition mode when clicking on Photo Browser.
exposition-hide-captionsbooleanfalseSet to true if you also want to hide captions in exposition mode
swipe-to-closebooleantrueYou can close Photo Browser with swipe up/down when this parameter is enabled
typestringstandaloneDefine 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).
themestringlightPhoto Browser color theme, could be light or dark
captions-themestringCaptions color theme, could be also dark or light. By default, equal to "theme" parameter
navbarbooleantrueSet to false to remove Photo Browser's Navbar
toolbarbooleantrueSet to false to remove Photo Browser's Toolbar
page-back-link-textstringBackText on back link in Photo Browser's navbar
popup-close-link-textstringCloseText on close link in Photo Browser's navbar when opened in Popup or as Standalone
navbar-show-countbooleanundefinedDefines 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-textstringofText of "of" in photos counter: "3 of 5"
icons-colorstringOne of the default colors

Photo Browser Events

EventDescription
<f7-photo-browser> events
photobrowser:openEvent will be triggered on Photo Browser open.
photobrowser:openedEvent will be triggered after Photo Browser completes its opening animation
photobrowser:closeEvent will be triggered on Photo Browser close.
photobrowser:closedEvent will be triggered after Photo Browser completes its closing animation
photobrowser:swipetocloseThis 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

Examples

photo-browser.vue
<template>
  <f7-page>
    <f7-navbar title="Photo Browser"></f7-navbar>
    <f7-block strong-ios outline-ios>
      <p>
        Photo Browser is a standalone and highly configurable component that allows to open window
        with photo viewer and navigation elements with the following features:
      </p>
      <ul>
        <li>Swiper between photos</li>
        <li>Multi-gestures support for zooming</li>
        <li>Toggle zoom by double tap on photo</li>
        <li>Single click on photo to toggle Exposition mode</li>
      </ul>
    </f7-block>
    <f7-block strong-ios outline-ios>
      <p>
        Photo Browser could be opened in a three ways - as a Standalone component (Popup
        modification), in Popup, and as separate Page:
      </p>
      <div class="grid grid-cols-3 grid-gap">
        <div>
          <f7-photo-browser ref="standalone" :photos="photos" :thumbs="thumbs" />
          <f7-button fill @click="$refs.standalone.open()">Standalone</f7-button>
        </div>
        <div>
          <f7-photo-browser ref="popup" :photos="photos" :thumbs="thumbs" type="popup" />
          <f7-button fill @click="$refs.popup.open()">Popup</f7-button>
        </div>
        <div>
          <f7-photo-browser
            ref="page"
            :photos="photos"
            :thumbs="thumbs"
            type="page"
            page-back-link-text="Back"
          />
          <f7-button fill @click="$refs.page.open()">Page</f7-button>
        </div>
      </div>
    </f7-block>
    <f7-block strong-ios outline-ios>
      <p>
        Photo Browser supports 2 default themes - default Light (like in previous examples) and Dark
        theme. Here is a Dark theme examples:
      </p>
      <div class="grid grid-cols-3 grid-gap">
        <div>
          <f7-photo-browser ref="standaloneDark" :photos="photos" :thumbs="thumbs" theme="dark" />
          <f7-button fill @click="$refs.standaloneDark.open()">Standalone</f7-button>
        </div>
        <div>
          <f7-photo-browser
            ref="popupDark"
            :photos="photos"
            :thumbs="thumbs"
            theme="dark"
            type="popup"
          />
          <f7-button fill @click="$refs.popupDark.open()">Popup</f7-button>
        </div>
        <div>
          <f7-photo-browser
            ref="pageDark"
            :photos="photos"
            :thumbs="thumbs"
            theme="dark"
            type="page"
            page-back-link-text="Back"
          />
          <f7-button fill @click="$refs.pageDark.open()">Page</f7-button>
        </div>
      </div>
    </f7-block>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7PhotoBrowser, f7Block, f7Button } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7PhotoBrowser,
    f7Block,
    f7Button,
  },
  data() {
    return {
      photos: [
        {
          url: 'img/beach.jpg',
          caption: 'Amazing beach in Goa, India',
        },
        'http://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',
        },
      ],
      thumbs: [
        'img/beach.jpg',
        'http://placekitten.com/1024/1024',
        'img/lock.jpg',
        'img/monkey.jpg',
        'img/mountains.jpg',
      ],
    };
  },
};
</script>