PRE-REQUISITES

For the following code examples to work, you will need to add the photoswipe library to your app. To add it follow these steps:

  1. When in Fliplet Studio’s Edit screen, open the Developer Options from the right hand menu
  2. With the Developer Options open, click the Libraries button in the top right corner
  3. In the search field, type in ‘photoswipe’
  4. Click it to add it to the list
  5. Click Save

Fliplet uses the PhotoSwipe library to display a gallery of images to a user. To do this with code, we first need to define the images we’re going to include by providing the URL of that image. If the image is stored on Fliplet’s File Manager you can get the URL by navigating to the image and double clicking on it. It will then open in a new tab of the browser with the URL in the browser search bar.

You can then show the images by running Fliplet.Navigate.previewImages(). See the example below:

var data = {
  images: [
    {
      title: ‘My first image’,
      url: 'https://lorempixel.com/1280/720/'
    },
    {
      title: ‘My second image’,
      url: 'https://lorempixel.com/400/200/'
    }
  ]
};

Fliplet.Navigate.previewImages(data);

Photoswipe also accepts various options. For instance you can start the slide show on the second image by using the code below (the index counts from 0. Ie, 0,1,2,3,4… So 1 is the second image).

var data = {
  images: [
    {
      title: 'My new image',
      url: 'https://lorempixel.com/1280/720/'
    },
    {
      url: 'https://lorempixel.com/400/200/'
    }
  ],
  options: {
    index: 1 // starts slide on second photo
  }
};

Fliplet.Navigate.previewImages(data);

For more details on the options you can use please use this link.