Muestra el cambio en su lugar
Antes y después, fases de obra, una reforma o una habitación vacía y amueblada: los visitantes comparan justo donde ocurrió.
krpano Plugins
Plugin 
krpano v1.0.0 Nuevo
krpano v1.0.0 NuevoCompare Views
Compara dos capturas del mismo lugar en tu tour de krpano: con un divisor o una junto a otra, siempre exactamente en la misma vista.
39 € Pago único, IVA no incluido
Compatibilidad
Verificado para krpano 1.23.2–1.24
Cómo funciona.
El avance de una obra, una reforma, un home staging virtual o el día y la noche: el mismo lugar en momentos distintos cuenta una historia que dos escenas separadas no pueden contar. Compare Views superpone una segunda captura a la escena actual. Los visitantes arrastran un divisor o, en el ordenador, ven ambas capturas una junto a otra, y las dos giran y hacen zoom siempre a la vez. Agrupas las escenas de un mismo lugar en el XML de tu tour, las alineas una vez con el modo de calibración, y cada ajuste es un atributo de un único elemento XML. La demo compara tres capturas de un mirador con distinto tiempo.
Instalación.
- 1
Copia una carpeta
Pon la carpeta cifrada del plugin en tu tour y añade un elemento layer a tu XML.
- 2
Agrupa tus capturas
Anota las escenas que muestran el mismo lugar en un elemento group, por ejemplo las fases de obra de una habitación.
- 3
Alinea una vez
Activa calibrate="true", gira cada captura hasta que encaje y copia la línea que aparece en tu XML.
Por qué marca la diferencia.
Siempre la misma vista
Ambas capturas giran y hacen zoom juntas en cada fotograma, a los dos lados del divisor y en la vista dividida.
Perfecto en cada pantalla
Un divisor para ratón, pantalla táctil y teclado, una vista dividida en el ordenador y un divisor más ligero en móviles y tabletas.
Capturas de pantalla.
Prueba la demoAjustes.
Se configuran como atributos en el XML de tu tour.
| Ajuste | Tipo | Predeterminado | Descripción |
|---|---|---|---|
active | Sí / No | true | Activa o desactiva Compare Views durante el tour (por defecto true). |
modes | Lista | slider|split | Vistas que el visitante puede elegir, en el orden de los botones: slider|split (por defecto), split|slider, slider o split. La vista dividida solo aparece en pantallas anchas de ordenador. |
start_mode | Lista | off | Abre la comparación al entrar en una escena de un grupo: off (por defecto, solo el botón Compare), slider o split. |
slider_position | Número | 0.5 | Posición inicial del divisor como parte del ancho desde el borde izquierdo (0.05–0.95, por defecto 0.5). |
labels | Sí / No | true | Muestra las etiquetas de los estados a ambos lados (por defecto true). |
slot | Lista | top-center | Lugar del botón Compare y de la barra: top-center (por defecto) o bottom-center. |
offset | Número | 16 | Distancia del botón y de la barra al borde en píxeles (0–200, por defecto 16). |
theme | Lista | dark | Esquema de color oscuro (por defecto) o claro. |
accent_color | Color | #3D8BFF | Color del icono Compare, de la vista elegida y del borde de foco (por defecto #3D8BFF). |
transition | Sí / No | true | Abre, cierra y cambia la comparación con transiciones breves y suaves; false la cambia al instante. Los visitantes con movimiento reducido activado nunca ven la animación. |
transition_duration | Número | 280 | Duración de las transiciones en milisegundos (100–1000, por defecto 280). |
mobile_quality | Número | 0.75 | Escala de representación de la imagen comparada en móviles y tabletas (0.5–1, por defecto 0.75); 1 es lo más nítido pero necesita más potencia gráfica. |
calibrate | Sí / No | false | Modo para creadores: una barra que gira la captura comparada en pasos de 0,1° y muestra la línea de estado lista; nunca lo dejes activado en un tour publicado (por defecto false). |
debug | Sí / No | false | Muestra el número de grupos y estados en la consola del navegador (por defecto false). |
text_compare | Texto | Compare | Etiqueta del botón Compare (por defecto «Compare»); una clave de <languages> o un texto. |
text_slider | Texto | Slider | Etiqueta del botón Slider (por defecto «Slider»). |
text_split | Texto | Split | Etiqueta del botón Split (por defecto «Split»). |
text_close | Texto | Close | Etiqueta del botón de cierre (por defecto «Close»). |
text_divider | Texto | Divider | Nombre del divisor para lectores de pantalla (por defecto «Divider»). |
text_states | Texto | States | Texto de ayuda de la etiqueta derecha, que muestra el siguiente estado (por defecto «States»). |
<layer name="z360_compare_views"
url="plugins/z360_compare_views/z360_compare_views.js"
keep="true"
start_mode="slider" />
<z360_compare_views_group name="kitchen" title="Kitchen"
scenes="scene_kitchen_before,scene_kitchen_after" />
<z360_compare_views_state name="scene_kitchen_before" label="Before" />
<z360_compare_views_state name="scene_kitchen_after" label="After" hoffset="12.5" />Características
- Comparador antes/después con un divisor arrastrable sobre el tour
- Vista dividida una junto a otra en pantallas anchas de ordenador
- Grupos con tantos estados por lugar como quieras; al tocar la etiqueta aparece el siguiente estado
- Sincronización exacta de dirección, inclinación y zoom en cada fotograma
- Desfase de orientación por estado para capturas que miran en direcciones distintas
- Modo de calibración que muestra la línea de estado lista para copiar
- Usa las escenas del propio tour: sin segundo tour y sin iframe
- Se abre automáticamente o con un botón Compare; se oculta en VR y vuelve después
- Representación más ligera de la imagen comparada en móviles y tabletas
- Transiciones suaves, desactivadas con movimiento reducido
- Control por teclado y etiquetas para lectores de pantalla
- Textos en varios idiomas, tema oscuro y claro, color de acento y variables CSS
- Archivo del plugin cifrado, cada ajuste como atributo XML
Qué incluye
- plugins/z360_compare_views/z360_compare_views.js (cifrado)
- Manual (inglés)
Más para krpano.
Detail Loupe
Una lupa para las fotos de tus tours de krpano, con ratón, lápiz y pantalla táctil.
Floor Plan
Un plano de planta interactivo para tu tour de krpano: un radar muestra dónde está el visitante y hacia dónde mira, en cada planta.
Info Cards
Fichas informativas para tu tour de krpano: panel lateral en escritorio, hoja inferior en el móvil y ficha de bienvenida, con fotos, vídeo, datos y botones.