Photo Browser Svelte Component

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

Photo Browser Svelte component represents Framework7’s Photo Browser component.

Photo Browser Svelte component doesn’t render any output. It can be used to create JS Photo Browser instance and control it inside of your Svelte component.

Photo Browser Component

There are following components included:

• PhotoBrowser

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 calling .instance() component’s method. For example:

<PhotoBrowser bind:this={component}>...</PhotoBrowser>
<script>
  let component;
  // to get instance in some method
  component.instance()
</script>

Examples

<Page>
  <Navbar title="Photo Browser" />
  <Block strong>
    <p>Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer and navigation elements with the following features:</p>
    <ul>
      <li>Swiper between photos</li>
      <li>Multi-gestures support for zooming</li>
      <li>Toggle zoom by double tap on photo</li>
      <li>Single click on photo to toggle Exposition mode</li>
    </ul>
  </Block>
  <Block strong>
    <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={photos} bind:this={standalone} />
        <Button fill raised onClick={() => standalone.open()}>Standalone</Button>
      </Col>
      <Col>
        <PhotoBrowser photos={photos} type="popup" bind:this={popup} />
        <Button fill raised onClick={() => popup.open()}>Popup</Button>
      </Col>
      <Col>
        <PhotoBrowser photos={photos} type="page" pageBackLinkText="Back" bind:this={page} />
        <Button fill raised onClick={() => page.open()}>Page</Button>
      </Col>
    </Row>
  </Block>
  <Block strong>
    <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={photos} theme="dark" bind:this={standaloneDark} />
        <Button fill raised onClick={() => standaloneDark.open()}>Standalone</Button>
      </Col>
      <Col>
        <PhotoBrowser photos={photos} theme="dark" type="popup" bind:this={popupDark} />
        <Button fill raised onClick={() => popupDark.open()}>Popup</Button>
      </Col>
      <Col>
        <PhotoBrowser photos={photos} theme="dark" type="page" pageBackLinkText="Back" bind:this={pageDark} />
        <Button fill raised onClick={() => pageDark.open()}>Page</Button>
      </Col>
    </Row>
  </Block>
</Page>
<script>
  import {Page, Navbar, Block, Row, Col, PhotoBrowser, Button} from 'framework7-svelte';
  let standalone;
  let popup;
  let page;
  let standaloneDark;
  let popupDark;
  let pageDark;
  let photos = [
    'https://placekitten.com/800/800',
    'https://placekitten.com/1024/1024',
  ];
</script>

← Panel / Side Panels

Popover →