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.
Comment modifier l’iframe de son projet timelapse ?
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.
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>

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
- default_tab : « single », « compare », « immersive »
/!\ 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 »
The information below is required for social login
Se connecter
Créer un nouveau compte