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.
Here is how it can be used in Vue component and how to control it:
<template>
<!-- Photo Browser -->
<f7-photo-browser
<!-- Reference -->
ref="pb"
<!-- Array with photos -->
:photos="photos"
<!-- Array Theme -->
theme="dark"
<!-- Open Callback/Event -->
@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>
You can pass all parameters in single params
property or use separate props for each parameter to specify them via component attributes:
Prop | Type | Default | Description |
---|---|---|---|
init | boolean | true | Initializes Photo Browser |
params | Object | Object with Photo Browser API parameters | |
params separate props |
|||
photos | array | [] | Array with URLs of photos or array of objects with "url" (or "html") and "caption" properties. |
initialSlide | number | 0 | Index number of initial photo slide. |
spaceBetween | number | 20 | Distance between photo slides in px. |
speed | number | 300 | Duration of transition between photo slides (in ms). |
zoom | boolean | true | Enable/disable ability to zoom and pan photos. |
zoomMax | number | 3 | Max zoom ratio. |
zoomMin | number | 1 | Minimal zoom ratio. |
exposition | boolean | true | Enable disable exposition mode when clicking on Photo Browser. |
expositionHideCaptions | boolean | false | Set to true if you also want to hide captions in exposition mode |
swipeToClose | 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). |
loop | boolean | false | Set to "true" to enable continuous loop mode |
theme | string | 'light' | Photo Browser color theme, could be 'light' or 'dark' |
captionsTheme | 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 |
backLinkText | string | 'Close' | Text on back link in Photo Browser's Navbar |
ofText | string | 'of' | Text of "of" in photos counter: "3 of 5" |
lazyLoading | boolean | false | Set to "true" to enable images lazy loading |
lazyLoadingInPrevNext | boolean | false | Set to "true" to enable lazy loading for the closest photos (for previous and next photos) |
lazyLoadingOnTransitionStart | boolean | false | By default, Photo Browser will load lazy photos after transition to this photo, so you may enable this parameter if you need it to load new photo in the beginning of transition |
Event | Description |
---|---|
open | Event will be triggered on photo browser open. |
close | Event will be triggered on photo browser close. |
swipeToClose | This event will be triggered when user close photo browser with swipe up/down. |
slideChangeStart | Event will be triggered in the beginning of animation to other slide (next or previous). Receives Swiper instance as an argument. |
slideChangeEnd | Event will be triggered after animation to other slide (next or previous). Receives Swiper instance as an argument. |
transitionStart | Event will be triggered in the beginning of transition. Receives swiper instance as an argument.. |
transitionEnd | Event will be triggered right before navbar inner will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory |
click | Event will be triggered when user click/tap on slider after 300ms delay. Receives Swiper instance and 'touchend' event as an arguments. |
tap | Event will be triggered when user click/tap on slider. Receives Swiper instance and 'touchend' event as an arguments. |
doubleTap | Event will be triggered when user double tap on slider's container. Receives Swiper instance and 'touchend' event as an arguments. |
lazyImageLoad | Event will be triggered when Photo Browser begins to load lazy loading photo. |
lazyImageReady | Event will be triggered after lazy loading photo will be loaded. |
The following Photo Browser components methods are available (e.g. by accesing it via $refs):
.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 |
.toggleZoom(); | Toggle zoom of currently active photo/slide |
.toggleExposition(); | Toggle exposition mode |
.enableExposition(); | Enable exposition mode |
.disableExposition(); | Disable exposition mode |
You can access Photo Browser initialized instance by accessing .f7PhotoBrowser
component's property.