Home » Framework7 Photo Browser Parameters

Framework7 Photo Browser Parameters

by Online Tutorials Library

Photo Browser Parameter

Framework7 provides a lot of parameters, which can be used with photo browser.

Index Parameter Type Description
1) photos array It is an array with URLs of images or an array of objects with URL and caption properties.
2) initialSlide number It is an initial slide’s index number.
3) spaceBetween number It represents the distance between photo slides in pixels.
4) speed number It represents the time duration of transition between photo slides.
5) zoom boolean It is used to enable/disable ability to zoom and pan photos.
6) maxZoom number It is the maximum zoom ratio.
7) minZoom number It is the minimum zoom ratio.
8) exposition boolean It enables/disables the exposition mode when clicking on photo browser.
9) expositionHideCaptions boolean If this is set to true then captions in exposition mode is hidden.
10) swipeToClose boolean If this is enabled, you can close the photo browser with swipe up/down.
11) view View instance It is the link to initialized view instance.
12) type string It defines how the photo browser should be opened.
13) loop boolean When set to true, it enables continuous loop mode.
14) theme string The photo browser color theme can be light or dark.
15) captionsTheme string It can be of two color dark or light.
16) navbar boolean It is set to false to remove the photo browser’s navbar.
17) toolbar boolean It is set to false to remove the photo browser?s toolbar.
18) backLinkText string It is the text on the link at the back in navbar.
19) ofText string It is the text of in photos counter. For eg 3 of 5.

Lazy Loading

Index Parameter Type Description
1) lazyLoading boolean It is set to true to enable lazy loading of images.
2) lazyLoadingInPrevNext boolean It is set to true to enable lazy loading for the closest photos.
3) lazyLoadingOnTransitionStart boolean 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.

Templates

Index Parameter Type Description
1) navbartemplate string It is the navbar html template.
2) toolbartemplate string It is the toolbar html template.
3) phototemplate string It is the single photo element html template.
4) lazyphototemplate string It is the single lazy loading photo element html template.
5) objecttemplate string It is the single object element html template.
6) captiontemplate string It is the single caption element html template.

Callbacks

Index Parameter Type Description
1) onOpen(photobrowser) function It is the callback function, which will be executed when photo browser is opened.
2) onClose(photobrowser) function It is the callback function, which will be executed when user closes the photo browser.
3) onSwipeToClose(photobrowser) function It is the callback function, which will be executed when user closes the photo browser by swiping up or down.

Swiper Callbacks

Index Parameter Type Description
1) onSlideChangeStart(swiper) function This callback function will be executed in the beginning of animation to other slide. It takes swiper instance as an argument.
2) onSlideChangeEnd(swiper) function This callback function will be executed after animation to other slide. It takes swiper instance as an argument.
3) onTransitionStart(swiper) function This callback function will be executed at the beginning of transition. It takes swiper instance as an argument.
4) onTransitionEnd(swiper) function This callback function will be executed after the transition. It takes swiper instance as an argument.
5) onClick(swiper,event) function This callback function will run when the user clicks on slider after 300ms delay. It accepts swiper instance and event as an parameter.
6) onDoubleTap(swiper, event) function This callback function will run when the user double clicks on slider container.
7) onLazyImageLoad(swiper, slide, image) function This callback function will be executed when lazy load begins loading photo.
8) onLazyImageReady(swiper, slide, image) function This function will be executed after lazy loading photo will be loaded.

Next TopicFramework7 Picker

You may also like