Info Cards

Comment ça marche.

Étape 1 sur 6 **Un repère dans la visite** Un repère i bleu dans la scène du musée indique qu'il y a quelque chose à lire.

La fiche s'ouvre à côté du panorama — Étape 1 sur 6 **Un repère dans la visite** Un repère i bleu dans la scène du musée indique qu'il y a quelque chose à lire.

Une visite doit raconter quelque chose : ce qu'offre une pièce, ce qu'est une œuvre, quand venir et où réserver. Info Cards affiche ces contenus dans des fiches qui s'ouvrent depuis n'importe quel hotspot – à côté du panorama sur les grands écrans, en feuille sur les téléphones – pour que vos visiteurs continuent à regarder autour d'eux pendant la lecture. Vous écrivez chaque fiche une seule fois sous forme d'élément <data> avec titre, texte mis en forme, une photo ou vidéo, informations clés et jusqu'à trois boutons ; chaque réglage est un attribut d'un seul élément XML.

Installation.

1
Copiez un dossier

Placez le dossier chiffré du plugin dans votre visite et ajoutez un élément plugin à votre XML de visite.
2
Rédigez vos fiches

Décrivez titre, texte, photo ou vidéo, informations clés et boutons dans des éléments <data>, avec des traductions si vous en avez besoin.
3
Marquez vos hotspots

Donnez à n'importe quel hotspot l'attribut z360_info_panels_card avec l'identifiant de la fiche ; choisissez disposition, couleurs et textes avec des attributs et sept variables CSS.

Ce qui fait la différence.

Lire sans quitter la visite

Sur grand écran, la fiche s'ouvre à côté du panorama, qui reste utilisable ; sur téléphone, elle s'ouvre en feuille que le visiteur fait glisser vers le haut ou écarte.

Une fiche pour chaque écran

Vous écrivez une fiche une fois ; Info Cards choisit le panneau latéral, la feuille, le tiroir ou la fenêtre centrée selon l'écran et garde une vidéo en cours quand le téléphone pivote.

Contenus tiers seulement après un clic

YouTube, Vimeo et les pages intégrées ne se chargent qu'après le clic du visiteur et affichent d'abord votre propre image d'aperçu. Il s'agit d'une barrière technique, pas d'une conformité juridique : vos obligations d'exploitant du site restent les vôtres.

Captures d'écran.

Essayer la démo

**Ordinateur** La fiche de la baleine dans le panneau latéral à côté de la visite du musée : photo, sous-titre, texte et informations clés.

**Smartphone** La fiche vidéo en feuille sur un téléphone, avec ses propres commandes de lecture, de son et de position.

**Détail** La fiche d'accueil en fenêtre centrée avec les horaires d'ouverture et le bouton Plan your visit.

Paramètres.

À définir comme attributs dans le XML de votre visite.

Paramètre	Type	Par défaut	Description
`active`	Oui / Non	`true`	Active ou désactive Info Cards ; false ferme la fiche et retire toutes les parties du plugin de la visite.
`layout`	Liste	`auto`	auto choisit le panneau latéral, la feuille ou le tiroir selon l'écran ; modal ouvre toujours une fenêtre centrée. `automodal`
`slot`	Liste	`middle-right`	Côté de l'écran du panneau latéral sur grand écran. `middle-rightmiddle-left`
`panel_width`	Nombre	`380`	Largeur du panneau latéral en pixels (280–600).
`offset`	Nombre	`16`	Distance du panneau latéral au bord de l'écran et aux autres éléments z360, en pixels (0–200).
`theme`	Liste	`dark`	Couleurs sombres ou claires des fiches. `darklight`
`accent_color`	Couleur	`#3D8BFF`	Couleur du bouton principal, des liens, du contour de focus et de la progression vidéo.
`startup_card`	Texte	—	Identifiant d'une fiche qui s'ouvre en fenêtre centrée au démarrage de la visite ; vide pour aucune.
`startup_once`	Oui / Non	`true`	N'affiche la fiche de démarrage qu'à la première visite dans ce navigateur.
`close_on_scene_change`	Oui / Non	`true`	Ferme la fiche ouverte quand la visite change de scène, sauf si le bouton de la fiche a lui-même changé la scène.
`deeplink`	Liste	`read`	read ouvre une fiche depuis un lien comme tour.html?z360-info-panels=whale ; off ignore ces liens. `offread`
`copy_link`	Oui / Non	`false`	Affiche un bouton Copier le lien dans l'en-tête de la fiche.
`pause_tour`	Oui / Non	`true`	Met en pause les sons et vidéos de la visite pendant la vidéo ou le contenu intégré de la fiche, puis reprend exactement ceux-ci.
`vr`	Oui / Non	`true`	true affiche la fiche en panneau dans la scène en VR ; false la ferme en VR et la rouvre après la VR.
`debug`	Oui / Non	`false`	Affiche dans la console du navigateur le nombre de fiches et de hotspots liés, et d'autres détails.
`text_card`	Texte	`Information`	Nom d'une fiche sans titre, lu par les lecteurs d'écran.
`text_close`	Texte	`Close`	Libellé du bouton de fermeture.
`text_copy_link`	Texte	`Copy link`	Libellé du bouton Copier le lien.
`text_gallery`	Texte	`Gallery`	Libellé du bouton Galerie ; le nombre d'éléments est ajouté.
`text_load_content`	Texte	`Load content`	Bouton qui charge une vidéo YouTube ou Vimeo ou une page intégrée.
`text_open_new_window`	Texte	`Open in new window`	Lien sous les contenus YouTube, Vimeo et intégrés.
`text_embed_failed`	Texte	`This content could not be loaded here.`	Message lorsqu'une page intégrée n'est pas chargée après 8 secondes.
`text_play`	Texte	`Play`	Libellé du bouton de lecture de la vidéo.
`text_mute`	Texte	`Mute`	Libellé du bouton de coupure du son de la vidéo.
`text_position`	Texte	`Playback position`	Libellé du curseur de position de la vidéo.
`text_vr_unavailable`	Texte	`Available outside VR`	Ligne du panneau VR pour une vidéo ou une page intégrée.

Exemple

<plugin name="z360_info_panels"
        url="plugins/z360_info_panels/z360_info_panels.js"
        keep="true"
        startup_card="welcome" />

<data name="z360_info_panels_card_whale" title="Whale skeleton" subtitle="Hall of mammals"
      image_url="media/whale.jpg" image_alt="Ribs and skull of a whale skeleton"
      facts="Length|about 20 m;Group|baleen whales"
      cta1_label="Show in the hall" cta1_url="scene:scene_hall_of_mammals"><![CDATA[
  <p>You are standing <b>inside</b> the skeleton.</p>
]]></data>

<scene name="scene_whale_skeleton" ...>
  <hotspot name="hs_whale" type="text" html="i" ath="-90" atv="-12"
           z360_info_panels_card="whale" />
</scene>

Fonctionnalités

Panneau latéral sur grand écran : le panorama, ses hotspots et les autres plugins restent utilisables
Feuille en bas d'écran sur téléphone en portrait, tiroir en paysage ; la rotation garde la fiche et une vidéo en cours
Fiche d'accueil centrée au démarrage de la visite, une fois par navigateur
Titre, sous-titre, texte mis en forme, liste d'informations clés et jusqu'à trois boutons par fiche
Une photo, une vidéo MP4 ou WebM avec ses propres commandes, une vidéo YouTube ou Vimeo ou une page intégrée par fiche
YouTube, Vimeo et les pages intégrées ne se chargent qu'après le clic du visiteur, avec votre propre image d'aperçu avant
Les boutons ouvrent une page web, un e-mail, un numéro de téléphone, une autre fiche, une scène avec une vue ou votre propre action krpano
Liens qui ouvrent la visite avec une fiche : tour.html?z360-info-panels=<fiche>
Met en pause les sons et vidéos de la visite pendant la vidéo de la fiche et ne reprend que ce qu'il a mis en pause
Textes des fiches en plusieurs langues sans dupliquer les fiches
Bouton Galerie qui ouvre Media Gallery lorsque les deux plugins sont dans la visite
Fiche VR dans la scène avec le plugin WebVR de krpano — testée dans l'émulation VR du navigateur, pas encore sur casques VR
Contrôle au clavier, gestion du focus et libellés pour lecteurs d'écran
Thème sombre et clair, couleur d'accent et sept variables CSS
Événements pour votre XML de visite ; fichiers du plugin chiffrés, chaque réglage en attribut XML

Contenu

plugins/z360_info_panels/z360_info_panels.js (chiffré)
plugins/z360_info_panels/z360_info_panels.xml (chiffré, facultatif : liens vers une fiche sans afficher d'abord la scène de départ)
Manuel (anglais)