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

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

Photo Browser Events

Photo Browser Methods

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

Access To Photo Browser Instance

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

Examples

Here is how it can be used in Vue component and how to control it:

<template>

  <!-- Photo Browser -->
  <f7-photo-browser
    ref="pb"
    :photos="photos"
    theme="dark"
    @open="onOpen"
  ></f7-photo-browser>

  <!-- Link To Open PB -->
  <f7-link @click="openPhotoBrowser">Photos</f7-link>

</template>

<script>
  export default {
    data: function () {
      return {
        photos: [
          {
            url: 'path/to/picture-1.jpg',
            caption: 'Picture 1'
          },
          {
            url: 'path/to/picture-2.jpg',
            caption: 'Picture 2'
          }
        ]
      }
    },
    methods: {
      openPhotoBrowser: function () {
        this.$refs.pb.open();
      },
      onOpen: function () {
        console.log('Photo Browser is opened')
      }
    }
  }
</script>