How to customize the iframe of your timelapse project?

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: like “#090909” but without the “#” as we are using a URL.

  • secondary_color: like “#090909” but without the “#” as we are using a URL.

  • font_color: like “#090909” but without the “#” as we are using a URL.

Pass these parameters like you would pass any query parameters to a URL:

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: like “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, the accepted values are “en” and “fr”.

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.