Photo Browser Vue Component
- Photo Browser Component
- Photo Browser Properties
- Photo Browser Events
- Photo Browser Methods
- Access To Photo Browser Instance
- Examples
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: | |
| 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 |
| back-link-text | string | Close | Text on back link in Photo Browser's Navbar |
| 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',
},
'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',
},
],
};
},
}
</script>