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.

Photo Browser Component

There are following components included:

• PhotoBrowser / F7PhotoBrowser

Photo Browser Properties

You can pass all parameters in single params property or use separate props for each parameter to specify them via component properties:

swiper: {
  initialSlide: 0,
  spaceBetween: 20,
  speed: 300,
  loop: false,
  preloadImages: true,
  navigation: {
    nextEl: ‘.photo-browser-next’,
    prevEl: ‘.photo-browser-prev’,
  },
  zoom: {
    enabled: true,
    maxRatio: 3,
    minRatio: 1,
  },
  lazy: {
    enabled: true,
  },
},

Photo Browser Events

Photo Browser Methods

The following Photo Browser components methods are available (e.g. by accesing it via $refs):

Access To Photo Browser Instance

You can access Photo Browser initialized instance by accessing .f7PhotoBrowser component’s property.

Examples

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      photos: [
        {
          url: 'img/beach.jpg',
          caption: 'Amazing beach in Goa, India',
        },
        'https://placekitten.com/1024/1024',
        'img/lock.jpg',
        {
          url: 'img/monkey.jpg',
          caption: 'I met this monkey in Chinese mountains',
        },
        {
          url: 'img/mountains.jpg',
          caption: 'Beautiful mountains in Zhangjiajie, China',
        },
      ],
    }
  }
  render() {
    return (
      <Page>
        <Navbar title="Photo Browser"></Navbar>
        <Block>
          <p>Photo Browser could be opened in a three ways - as a Standalone component (Popup modification), in Popup, and as separate Page:</p>
          <Row>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                ref={(el) => {this.standalone = el}}
              />
              <Button raised onClick={() => this.standalone.open()}>Standalone</Button>
            </Col>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                type="popup"
                ref={(el) => {this.popup = el}}
              />
              <Button raised onClick={() => this.popup.open()}>Popup</Button>
            </Col>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                type="page"
                pageBackLinkText="Back"
                ref={(el) => {this.page = el}}
              />
              <Button raised onClick={() => this.page.open()}>Page</Button>
            </Col>
          </Row>
        </Block>
        <Block>
          <p>Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
          <Row>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                theme="dark"
                ref={(el) => {this.standaloneDark = el}}
              />
              <Button raised onClick={() => this.standaloneDark.open()}>Standalone</Button>
            </Col>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                theme="dark"
                type="popup"
                ref={(el) => {this.popupDark = el}}
              />
              <Button raised onClick={() => this.popupDark.open()}>Popup</Button>
            </Col>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                theme="dark"
                type="page"
                pageBackLinkText="Back"
                ref={(el) => {this.pageDark = el}}
              />
              <Button raised onClick={() => this.pageDark.open()}>Page</Button>
            </Col>
          </Row>
        </Block>
      </Page>
    );
  }
};

← Panel / Side Panels

Popover →