With Enlaps' Tikee solution and the myTikee web application dedicated to timelapse, you can easily integrate your timelapse project into your website with just one click. Whether you want to add a panoramic video, a before-after comparison, or an image gallery, you have access to customizable iframe links. This tutorial guides you through the steps to customize these iframes to optimize the display of your timelapse project.

Accessing the Iframe Integration Code

To find your iframe code, go to the project index:

1. Go to Project.

2. Click on Share.

1. Modifying the Iframe Size

The iFrame embed code can be easily customized directly from the embed code. Often when a gallery is embedded with a iframe there is a default scrolling bar if the gallery is larger than the iframe. In order to avoid this, there are two options that can be added to easily adjust the iframe.

One option is to change the height and width of the iframe to match the gallery by changing the numbers for the height and width of the code as shown below.

<iframe src="https://staging.tikee.io/time_lapses/1879/photo_gallery/6b12e12d-5650-4aed-8495-38fee083fbba?lang=en" allowfullscreen style="width: 900px; height: 620px; border: none;" ></iframe>

You can also remove the border and scroll bar. You can add scrolling=no and frameBorder=0 to the embed code to remove this bar. Heads up: If you remove the scroll bar of the gallery, make sure to set the height so that the control buttons does not get cut off.

For the video to adapt to the page's size, one must add ?fluid=true in the iframe

<iframe src="https://my.tikee.io/videos/cc3dc6e1-862b-4132-b563-61c92ce0a60a?fluid=true" style="width: 100%; height: 100%; border: none;"></iframe>

2. Customizing Iframe Colors

can choose the colors of your iframe like so:

• primary_color=5f9ea0

• secondary_color=ff9800

• font_color=db0b93

Pass these parameters like you would pass any query parameters to a URL, separated by &:

https://my.tikee.io/time_lapses/{…}/photo_gallery/{…}?lang=en&primary_color=5f9ea0&secondary_color=ff9800&font_color=db0b93

All together:

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&primary_color=5f9ea0&secondary_color=ff9800&font_color=db0b93" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>

3. Choosing Viewer Types in the Iframe

You can choose the viewer types you want in your iframe like so:

default_tab : “single”, “compare”, “immersive”

• single: normal panning mode

• compare: before-after comparison view

• immersive: immersive view with reprojection

allowed_viewer_types: single,compare,immersive separated by a comma.

/!\ These parameters works together, you cannot use allowed_viewer_types without default_tab.

https://my.tikee.io/time_lapses/{…}/photo_gallery/{…}?lang=en&default_tab=immersive&allowed_viewer_types=single,compare,favorite,video

All together:

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&default_tab=immersive&allowed_viewer_types=single,compare,favorite,video" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>

4. Hiding Download Buttons

You can hide download buttons in your iframe like so:

• hide_downloads : “true”, “false”

https://my.tikee.io/time_lapses/{…}/photo_gallery/{…}?lang=en&hide_downloads=true

All together:

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&hide_downloads=true" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>

5. Choosing the Language

You can choose the language of your iframe viewer by changing the “lang” parameter.

Accepted values:

lang=en
lang=fr
lang=de
lang=es
lang=ar

6. Image rotation

You can rotate the images displayed by the iframe by adding this parameter to the URL:

• rotate: "true" or "false".

When enabled, images are rotated by a fixed 180° angle. By default, images are not rotated.

Example:

<iframe src="https://my.tikee.io/{...}?lang=en&rotate=true" allowfullscreen style="width: 900px; height: 620px; border: none;"></iframe>

<iframe src="https://my.tikee.io/{...}?lang=en&rotate=true" allowfullscreen style="width: 900px; height: 620px; border: none;"></iframe>

<iframe src="https://my.tikee.io/{...}?lang=en&rotate=true" allowfullscreen style="width: 900px; height: 620px; border: none;"></iframe>

Customizing the iframes of your Tikee timelapse projects is a simple process that allows you to control the appearance and functionality of your galleries on your website. By adjusting dimensions, colors, viewer types, and other parameters, you can seamlessly integrate your timelapse content into your online communication strategy.

For more information on the Tikee solution and its applications, visit our website.