Acceso e integración en páginas web
de visitas virtuales panorámicas 360
Existen varias formas de enlazar y visualizar las visitas virtuales panorámicas dentro de una página web a partir de la URL de la visita, ya sea un enlace de un visor externo como Matterport o un enlace interno a una visita virtual alojada en nuestro servidor.
Vamos a contemplar 3 maneras distintas de hacerlo y como ejemplos de visitas y recorridos virtuales usaremos ejemplos:
- una demo de visita virtual en visor básico KRPANO
https://www.360panorama.es/360/demo/demoweb.html - un modelo Matterport de prueba
https://my.matterport.com/show/?m=fL2dYbupAva
Enlace básico en ventana nueva a la URL de la visita virtual
En este caso a través de un enlace o un botón abrimos una nueva ventana del navegador en la que aparece la visita virtual.
Tiene la ventaja de que la visita se abre a pantalla completa pero fuera de nuestra página web, por esa razón el enlace lo abrimos en una pestaña nueva para mantener abierta nuestra web en otra ventana como origen del enlace.
Es la opción mas simple y es especialmente útil en el caso de la visualización en dispositivos móviles don la nueva pestaña se abre a pantalla completa.
Es posible para el enlace usar una imagen a modo de botón.
Ejemplos:
URL visita virtual:
https://www.360panorama.es/360/demo/demoweb.html
Código:
<a href="https://www.360panorama.es/360/demo/demoweb.html" target="_blank" rel="noopener">Enlace a visita virtual Krpano</a>
No olvidar poner en la etiqueta de enlace las variables target=»_blank» y rel=»noopener»
URL visita virtual:
https://my.matterport.com/show/?m=fL2dYbupAva&nozoom=1
Código:
<a href="https://my.matterport.com/show/?m=fL2dYbupAva&nozoom=1" target="_blank" rel="noopener">Enlace a visita virtual Matterport</a>
No olvidar poner en la etiqueta de enlace las variables target=»_blank» y rel=»noopener» para que el enlace a la ventana nueva sea correcto. Utilizar la variable &nozoom=1 junto con el enlace de Matterport permite que las fotos no se puedan ampliar y el movimiento sea mas fluido.
Visita virtual insertada dentro del contenido de la página con una iframe
En este caso insertamos un iframe o marco dentro de la página de forma que se vera como si fuera una imagen interactiva integrada en el contenido de la página. De esta manera integramos completamente el contenido dentro de nuestra página si bien tenemos una limitación de la altura del contenido que no debe de ser mayor de 500 px para que se vea bien en móviles, la anchura del marco puede ser 100%.
Se puede combinar con el enlace utilizando el iframe para la versión de ordenador de sobremesa o monitores grandes y un enlace a ventana nueva para pantallas pequeñas o dispositivos móviles.
Ejemplos:
Visita virtual Krpano incrustada en iframe
URL visita virtual:
https://www.360panorama.es/360/demo/demoweb.html
Código:
<iframe src="https://www.360panorama.es/360/demo/demoweb.html " width="100%" height="480" frameborder="0"></iframe>
No olvidar poner en la etiqueta de enlace las variables target=»_blank» y rel=»noopener»
Visita virtual Matterport incrustada en iframe
URL visita virtual:
https://my.matterport.com/show/?m=fL2dYbupAva&nozoom=1
Código:
<iframe src="https://my.matterport.com/show/?m=fL2dYbupAva&nozoom=1" width="100%" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
En el caso de un iframe de Matterport es necesario poner en la etiqueta allowfullscreen allow=’xr-spatial-tracking‘ para que se pueda ver a pantalla. completa. Utilizar la variable &nozoom=1 junto con el enlace de Matterport permite que las fotos no se puedan ampliar y el movimiento sea mas fluido.
Visita virtual en visor fancybox
Fancybox es una alternativa a Lightbox, un visor de imágenes y contenidos que se superpone en la página web, y que permite visualizar contenido en iframes y es bastante flexible. Para activar el visor podemos usar un enlace, botón o imagen a modo de botón con el que lanzar la URL del contenido mediante un script.
Esta opción permite visualizar la visita interactiva a pantalla casi completa en diferentes dispositivos e integrada dentro de la página web.
Para configurar el visor es necesario seguir las instrucciones de instalación del mismo o instalar un plugin de WordPress en caso de que la página este desarrollada en este sistema.
- Visor Fancybox
https://fancyapps.com/fancybox/ - Firelight (anteriormente Easy FancyBox) – WordPress Lightbox Plugin
https://firelightwp.com/
Fancybox en WordPress
El nombre del plugin es FirelightWP (https://firelightwp.com/) y se puede instalar su versión gratuita desde la sección de «Añadir nuevo plugin» del área de administración de WordPress. Una vez instalado y activado, es muy importante acceder al menú «Lightbox > Settings» del área de administración de WordPress y dentro de «FancyBox Classic Reloaded Settings» realizar la configuración del plugin de esta manera:
- Desplegar la sección «FancyBox Classic: Enable». Marcar la casilla «Enable for iFrames» y desmarcar la casilla «Enable for images» para evitar que se active automáticamente en las imágenes.
- A continuación en ese mismo listado de settings podemos desplegar la sección «FancyBox Classic: iFrames» y configurar el aspecto que tendrá la ventana emergente (Ejemplo: Anchura:90%, Altura: 90%, Borde: 0 o 1, Show title: NO, Posición titulo: Float, Tile from alt: YES, Allow fullscreen: YES).
- Utilizar el botón inferior «Guardar cambios» de la sección para guardar la nueva configuración.
Una vez el plugin esta activo y configurado, la forma de hacerlo funcionar es añadiendo la pequeña etiqueta class=»fancybox-iframe» en el código html de un enlace URL. Para añadir esta etiqueta a un enlace de texto se puede usar el editor wordpress en el modo texto y también se puede añadir al enlace de una imagen, botón o capa dentro el código html.
Visita virtual en fancybox
Imagen enlazada:
Código:
Enlace a visita virtual
Poner como atributo del enlace class=»fancybox-iframe» en el caso de un texto, botón o imagen.