Info Cards

Cómo funciona.

Paso 1 de 6 **Un marcador en el tour** Un marcador i azul en la escena del museo indica que hay algo para leer.

La ficha se abre junto al panorama — Paso 1 de 6 **Un marcador en el tour** Un marcador i azul en la escena del museo indica que hay algo para leer.

Un tour tiene que contar algo a los visitantes: qué ofrece una sala, qué es una pieza, cuándo visitar y dónde reservar. Info Cards muestra ese contenido en fichas que se abren desde cualquier hotspot: junto al panorama en pantallas anchas y como hoja en el móvil, para que los visitantes sigan mirando a su alrededor mientras leen. Escribes cada ficha una sola vez como elemento <data> con título, texto con formato, una foto o vídeo, datos y hasta tres botones, y cada ajuste es un atributo de un único elemento XML.

Instalación.

1
Copia una carpeta

Coloca la carpeta cifrada del plugin en tu tour y añade un elemento plugin a tu XML del tour.
2
Escribe tus fichas

Describe título, texto, una foto o vídeo, datos y botones en elementos <data>, con traducciones si las necesitas.
3
Marca tus hotspots

Da a cualquier hotspot el atributo z360_info_panels_card con el id de la ficha; elige diseño, colores y textos con atributos y siete variables CSS.

Por qué marca la diferencia.

Leer sin salir del tour

En pantallas anchas la ficha se abre junto al panorama, que sigue siendo utilizable; en el móvil se abre como hoja que el visitante arrastra hacia arriba o aparta.

Una ficha para cada pantalla

Escribes una ficha una vez; Info Cards elige el panel lateral, la hoja inferior, el cajón o la ventana centrada según la pantalla y mantiene un vídeo en reproducción al girar el móvil.

Contenido de terceros solo tras un clic

YouTube, Vimeo y las páginas incrustadas se cargan solo después del clic del visitante y antes muestran tu propia imagen de vista previa. Es una barrera técnica, no un cumplimiento legal: tus obligaciones como operador del sitio siguen siendo tuyas.

Capturas de pantalla.

Prueba la demo

**Ordenador** La ficha de la ballena en el panel lateral junto al tour del museo: foto, subtítulo, texto y datos.

**Móvil** La ficha de vídeo como hoja inferior en un móvil, con sus propios controles de reproducción, silencio y posición.

**Detalle** La ficha de bienvenida como ventana centrada con el horario y el botón Plan your visit.

Ajustes.

Se configuran como atributos en el XML de tu tour.

Ajuste	Tipo	Predeterminado	Descripción
`active`	Sí / No	`true`	Activa o desactiva Info Cards; false cierra la ficha y quita todas las partes del plugin del tour.
`layout`	Lista	`auto`	auto elige el panel lateral, la hoja inferior o el cajón según la pantalla; modal abre siempre una ventana centrada. `automodal`
`slot`	Lista	`middle-right`	Lado de la pantalla del panel lateral en pantallas anchas. `middle-rightmiddle-left`
`panel_width`	Número	`380`	Ancho del panel lateral en píxeles (280–600).
`offset`	Número	`16`	Distancia del panel lateral al borde de la pantalla y a otros elementos z360, en píxeles (0–200).
`theme`	Lista	`dark`	Colores oscuros o claros de las fichas. `darklight`
`accent_color`	Color	`#3D8BFF`	Color del botón principal, los enlaces, el borde de foco y el progreso del vídeo.
`startup_card`	Texto	—	Id de una ficha que se abre como ventana centrada al iniciar el tour; vacío para ninguna.
`startup_once`	Sí / No	`true`	Muestra la ficha inicial solo en la primera visita en este navegador.
`close_on_scene_change`	Sí / No	`true`	Cierra la ficha abierta cuando el tour cambia de escena, salvo que el propio botón de la ficha la haya cambiado.
`deeplink`	Lista	`read`	read abre una ficha desde un enlace como tour.html?z360-info-panels=whale; off ignora esos enlaces. `offread`
`copy_link`	Sí / No	`false`	Muestra un botón Copiar enlace en la cabecera de la ficha.
`pause_tour`	Sí / No	`true`	Pausa los sonidos y vídeos del tour mientras se reproduce el vídeo o el contenido incrustado de la ficha y después reanuda exactamente esos.
`vr`	Sí / No	`true`	true muestra la ficha como panel en la escena en VR; false la cierra en VR y la vuelve a abrir al salir de VR.
`debug`	Sí / No	`false`	Muestra en la consola del navegador el número de fichas y hotspots vinculados y más detalles.
`text_card`	Texto	`Information`	Nombre de una ficha sin título que leen los lectores de pantalla.
`text_close`	Texto	`Close`	Etiqueta del botón de cerrar.
`text_copy_link`	Texto	`Copy link`	Etiqueta del botón Copiar enlace.
`text_gallery`	Texto	`Gallery`	Etiqueta del botón Galería; se añade el número de elementos.
`text_load_content`	Texto	`Load content`	Botón que carga un vídeo de YouTube o Vimeo o una página incrustada.
`text_open_new_window`	Texto	`Open in new window`	Enlace bajo el contenido de YouTube, Vimeo e incrustado.
`text_embed_failed`	Texto	`This content could not be loaded here.`	Mensaje cuando una página incrustada no se ha cargado tras 8 segundos.
`text_play`	Texto	`Play`	Etiqueta del botón de reproducción del vídeo.
`text_mute`	Texto	`Mute`	Etiqueta del botón de silencio del vídeo.
`text_position`	Texto	`Playback position`	Etiqueta del control de posición del vídeo.
`text_vr_unavailable`	Texto	`Available outside VR`	Línea del panel VR para un vídeo o una página incrustada.

Ejemplo

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

Características

Panel lateral en pantallas anchas: el panorama, sus hotspots y otros plugins siguen siendo utilizables
Hoja inferior en el móvil en vertical, cajón en horizontal; al girar el móvil se mantienen la ficha y un vídeo en reproducción
Ficha de bienvenida centrada al iniciar el tour, una vez por navegador
Título, subtítulo, texto con formato, lista de datos y hasta tres botones por ficha
Una foto, un vídeo MP4 o WebM con controles propios, un vídeo de YouTube o Vimeo o una página incrustada por ficha
YouTube, Vimeo y las páginas incrustadas se cargan solo tras el clic del visitante, antes con tu propia imagen de vista previa
Los botones abren una página web, un correo, un número de teléfono, otra ficha, una escena con una vista o tu propia acción de krpano
Enlaces que abren el tour con una ficha: tour.html?z360-info-panels=<ficha>
Pausa los sonidos y vídeos del tour mientras se reproduce el vídeo de la ficha y reanuda solo lo que pausó
Textos de las fichas en varios idiomas sin duplicar fichas
Botón Galería que abre Media Gallery cuando ambos plugins están en el tour
Ficha VR en la escena con el plugin WebVR de krpano — probada en la emulación VR del navegador, aún no en visores VR
Control por teclado, gestión del foco y etiquetas para lectores de pantalla
Tema oscuro y claro, color de acento y siete variables CSS
Eventos para tu XML del tour; archivos del plugin cifrados, cada ajuste como atributo XML

Qué incluye

plugins/z360_info_panels/z360_info_panels.js (cifrado)
plugins/z360_info_panels/z360_info_panels.xml (cifrado, opcional: enlaces a fichas sin mostrar antes la escena inicial)
Manual (inglés)