- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Photo Browser Parameters
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 | - |