Framework7 - Photo Browser Parameters


Advertisements

Description

Framework7 provides a list of parameters, which are used with photo browser and are listed in the following table −

S.No Parameter & Description Type Default
1

photos

It is an array with URLs of images or an array of objects with URL and caption properties.

array []
2

initialSlide

It is an initial slide's index number.

number 0
3

spaceBetween

It represents the distance between photo slides in pixels.

number 20
4

speed

It represents the time duration of transition between photo slides.

number 300
5

zoom

It is used to enable/disable ability to zoom and pan photos.

boolean true
6

maxZoom

It is the maximum zoom ratio.

number 3
7

minZoom

It is the minimum zoom ratio.

number 1
8

exposition

It enables/disables the exposition mode when clicking on photo browser.

boolean true
9

expositionHideCaptions

If this is set to true then captions in exposition mode is hidden.

boolean false
10

swipeToClose

If this is enabled, you can close the photo browser with swipe up/down.

boolean true
11

view

It is the link to initialized view instance.

View instance undefined
12

type

It defines how the photo browser should be opened.

string standalone
13

loop

When set to true, it enables continuous loop mode.

boolean false
14

theme

The photo browser color theme can be light or dark.

string light
15

captionsTheme

It can be of two color dark or light.

string -
16

navbar

It is set to false to remove the photo browser's navbar.

boolean true
17

toolbar

It is set to false to remove the photo browser’s toolbar.

boolean true
18

backLinkText

It is the text on the link at the back in navbar.

string close
19

ofText

It is the text of in photos counter. For eg 3 of 5.

string of
Lazy Loading
1

lazyLoading

It is set to true to enable lazy loading of images.

boolean false
2

lazyLoadingInPrevNext

It is set to true to enable lazy loading for the closest photos.

boolean false
3

lazyLoadingOnTransitionStart

After the transition to photo, the photo browser will load lazy photos by default. If you enable this parameter, you can load new photo in the beginning of transition.

boolean false
Templates
1

navbarTemplate

It is the navbar HTML template.

string -
2

toolbarTemplate

It is the toolbar HTML template.

string -
3

photoTemplate

It is the single photo element HTML template.

string -
4

lazyPhotoTemplate

It is the single lazy loading photo element HTML template.

string -
5

objectTemplate

It is the single object element HTML template.

string -
6

captionTemplate

It is the single caption element HTML template.

string -
Callbacks
1

onOpen(photobrowser)

It is the callback function, which will be executed when photo browser is opened.

function -
2

onClose(photobrowser)

It is the callback function, which will be executed when user closes the photo browser.

function -
3

onSwipeToClose(photobrowser)

It is the callback function, which will be executed when user closes the photo browser by swiping up or down.

function -
Swiper Callbacks
1

onSlideChangeStart(swiper)

This callback function will be executed in the beginning of animation to other slide. It takes swiper instance as an argument.

function -
2

onSlideChangeEnd(swiper)

This callback function will be executed after animation to other slide. It takes swiper instance as an argument.

function -
3

onTransitionStart(swiper)

This callback function will be executed at the beginning of transition. It takes swiper instance as an argument.

function -
4

onTransitionEnd(swiper)

This callback function will be executed after the transition. It takes swiper instance as an argument.

function -
5

onClick(swiper,event)

This callback function will run when the user clicks on slider after 300ms delay. It accepts swiper instance and event as an parameter.

function -
6

onDoubleTap(swiper, event)

This callback function will run when the user double clicks on slider container.

function -
7

onLazyImageLoad(swiper, slide, image)

This callback function will be executed when lazy load begins loading photo.

function -
8

onLazyImageReady(swiper, slide, image)

This function will be executed after lazy loading photo will be loaded.

function -
framework7_photo_browser.htm
Advertisements