The iframe embed code will allow you to embed more than one gallery on a page. You can find the iframe code by going to Project Index > Project > Share.

1. Changing size of iframe

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. Iframe customization

  • 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>
 
viewer iframe mytikee
 

  • Viewer

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>
 

  • Hide downloads 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>
 

  • Language

You can choose the language of your iframe viewer by changing the “lang” parameter, the accepted values are “en” and “fr”.