Avec la solution Tikee, par l’intermédiaire de l’application web dédiée au timelapse mytikee, vous pouvez ajouter en un clic votre projet timelapse à votre site web. Que ce soit la vidéo panoramique, l’avant-après, la galerie d’image, etc., vous avez accès à l’ensemble des liens iframe modifiables. Ci-dessous un tutoriel afin de vous expliquer comment personnaliser ces liens iframe.

 

 
 
 

Le code d’intégration de l’iframe vous permettra d’intégrer plus d’une galerie sur une page. Vous pouvez trouver le code de l’iframe en allant dans l’index du projet > Projet > Partager.

 

1. Modification de la taille de l’iframe

Le code d’intégration de l’iFrame peut être facilement personnalisé directement à partir du code d’intégration. Souvent, lorsqu’une galerie est incorporée avec une iframe, il y a une barre de défilement par défaut si la galerie est plus grande que l’iframe. Afin d’éviter cela, deux options peuvent être ajoutées pour ajuster facilement l’iframe.
Une option consiste à modifier la hauteur et la largeur de l’iframe pour qu’elle corresponde à la galerie en changeant les chiffres pour la hauteur et la largeur du code comme indiqué ci-dessous.

<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>

Vous pouvez également supprimer la bordure et la barre de défilement. Vous pouvez ajouter scrolling = « no » et frameBorder = « 0 » au code d’intégration pour supprimer cette barre. Attention : Si vous supprimez la barre de défilement de la galerie, veillez à régler la hauteur pour que les boutons de commande ne soient pas coupés.

Pour que la vidéo s'adapte à la taille de la page, il faut ajouter "?fluid=true" dans l'iframe

Soit :

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

 

2. Personnalisation de l’iframe

  • Les couleurs

Vous pouvez choisir les couleurs de votre iframe de la même manière :

  • primary_color : comme « #090909 » mais sans le « # » car nous utilisons une URL.
  • secondary_color : comme « #090909 » mais sans le « # » car nous utilisons une URL.
  • font_color : comme « #090909 » mais sans le « # » car nous utilisons une URL.

Passez ces paramètres comme vous passeriez n’importe quel paramètre de requête à une URL :

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

Toutes les modifications ensemble :

<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
 

  • Le viewer

Vous pouvez choisir les types de viewer que vous voulez dans votre iframe de la manière suivante :

  • default_tab : « single », « compare », « immersive »
    • single : mode panoramique normal
    • compare : vue comparaison avant-après
    • immersive : vue immersive avec reprojection
  • allowed_viewer_types : comme « single », « compare », « immersive » séparés par une virgule

/!\ Ces paramètres fonctionnent ensemble, vous ne pouvez pas utiliser « allowed_viewer_types » sans « default_tab ».

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

Toutes les modifications ensemble :

<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>
 

  • Cacher les boutons de téléchargement

Vous pouvez cacher les boutons de téléchargement dans votre iframe :

  • hide_downloads: « true », « false »

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

Toutes les modifications ensemble :

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

  • La langue

Vous pouvez choisir la langue du viewer votre iframe en modifiant le parametre « lang », les valeurs acceptées sont « en » et « fr »