Photo Browser React Component

Photo Browser is an photo browser component to display collection of photos / images. Photos can be zoomed and panned (optional).

Photo Browser React component represents Framework7's Photo Browser component.

Usage example

Here is how it can be used in React component and how to control it:

export const PhotoBrowserPageDefaultState = [{
    url: 'http://lorempixel.com/400/400/nature/1/',
    caption: 'Ants on grass'
  },
    'http://placekitten.com/600/600',
    'http://lorempixel.com/400/400/nature/2/',
  {
    url: 'http://lorempixel.com/400/400/nature/3/',
    caption: 'Beautiful mountains in Zhangjiajie, China'
  }, {
    url: 'http://lorempixel.com/400/400/nature/4/',
    caption: 'Trees in the Fall'
  }
];

const photoStyle = {
  height: "20vw",
  width: "20%"
};

export class PhotoBrowserPage extends Component {
    constructor() {
      super();

      this.state = {
          photos: PhotoBrowserPageDefaultState
      };

      this.fw7 = getFramework7();
    }

    render() {
      return (
        <Page>
          <Navbar backLink="Back" title="Photo Browser" sliding />                        
          {
            this.state.photos.map((photo, index) => {
              return (
                <Link key={index} onClick={() => {this.openPhotoBrowser(index)}}>
                {
                  this.getImage(photo, index)     
                }                  
                </Link>
              );
            })
          }
        </Page>
      ); 
    }

    openPhotoBrowser(index:number) {
        let photoBrowser = this.fw7.photoBrowser({
            photos: this.state.photos,
            theme: "dark",
            onOpen: this.onOpen,
            onClose: this.onClose
        });

        photoBrowser.open(index);
    }

    onOpen(index:number) {
      console.log('Photo Browser opened');
    }

    onClose(index:number) {
      console.log('Photo Browser closed');
    }

    getImage(photo: any, index: number ) {
      let imageSrc = '';

      if (typeof photo === 'string') {
        return <img src={photo} style={photoStyle} />;
      } else if (typeof photo === 'object') {
        return <img src={photo.url} style={photoStyle} />;
      }                        
    }   
}

Properties

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 Properties

Event	Description
onOpen	Event will be triggered on photo browser open.
onClose	Event will be triggered on photo browser close.
onSwipetoclose	This event will be triggered when user close photo browser with swipe up/down.
onSlidechangestart	Event will be triggered in the beginning of animation to other slide (next or previous). Receives Swiper instance as an argument.
onSlidechangeend	Event will be triggered after animation to other slide (next or previous). Receives Swiper instance as an argument.
onTransitionstart	Event will be triggered in the beginning of transition. Receives swiper instance as an argument..
onTransitionend	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
onClick	Event will be triggered when user click/tap on slider after 300ms delay. Receives Swiper instance and 'touchend' event as an arguments.
onTap	Event will be triggered when user click/tap on slider. Receives Swiper instance and 'touchend' event as an arguments.
onDoubletap	Event will be triggered when user double tap on slider's container. Receives Swiper instance and 'touchend' event as an arguments.
onLazyimageload	Event will be triggered when Photo Browser begins to load lazy loading photo.
onLazyimageready	Event will be triggered after lazy loading photo will be loaded.