Language: ENCN

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.

Photo Browser React component doesn't render any output. It can be used to create JS Photo Browser instance and control it inside of your React 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.