Media Gallery

Cómo funciona.

Paso 1 de 6 **Un marcador en el tour** Un marcador con forma de cámara en la escena del museo indica que hay más que ver.

Un clic abre la galería — Paso 1 de 6 **Un marcador en el tour** Un marcador con forma de cámara en la escena del museo indica que hay más que ver.

Los hotspots que abren una foto en una pestaña nueva sacan a tus visitantes del tour. Media Gallery abre fotos, vídeos MP4 y vídeos de YouTube o Vimeo en una lightbox sobre el panorama: el visitante amplía los detalles, desliza en el móvil y, al cerrar, vuelve a la misma vista. Los sonidos, los vídeos y la rotación automática del tour se pausan mientras la galería está abierta, 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.
2
Describe tus galerías

Indica fotos, vídeos, pies de foto y traducciones en un archivo JSON o en elementos <data> de tu XML.
3
Ábrela desde cualquier hotspot

Llama a plugin[z360_media_gallery].open() desde un hotspot o tu propio botón de skin; elige aspecto y comportamiento con atributos y seis variables CSS.

Por qué marca la diferencia.

El visitante no sale del tour

La galería se abre sobre el panorama y se cierra en la misma vista; los sonidos, los vídeos y la rotación automática del tour se pausan y después continúan.

Detalles que se pueden leer

Zoom de hasta 4× con la rueda del ratón, doble clic, el teclado o dos dedos; un archivo de alta resolución solo se carga cuando el visitante amplía.

YouTube y Vimeo solo tras un clic

YouTube y Vimeo solo se cargan después del clic del visitante, y entonces en el modo de privacidad mejorada de YouTube y con el parámetro do-not-track de Vimeo. Es un bloqueo técnico, no un cumplimiento legal: tus obligaciones como responsable del sitio siguen siendo tuyas.

Capturas de pantalla.

Prueba la demo

**Ordenador** La lightbox sobre el tour del museo: el plano de Roma de 1748 con su pie de foto y la tira de miniaturas.

**Móvil** El visor a pantalla completa en un móvil.

**Detalle** Zoom en el plano de Roma: el detalle procede del archivo de alta resolución.

Ajustes.

Se configuran como atributos en el XML de tu tour.

Ajuste	Tipo	Predeterminado	Descripción
`active`	Sí / No	`true`	Activa o desactiva la galería durante el tour; desactivada, se cierra y rechaza cualquier apertura (por defecto true).
`source`	Texto	—	URL de un archivo JSON con galerías, relativa al primer archivo XML del tour; vacío (por defecto) usa solo las galerías <data>.
`deeplink`	Lista	`read`	Enlaces de galería en la dirección de la página: off, read (por defecto: abre una foto enlazada al empezar) o readwrite (además mantiene el elemento mostrado en la dirección). `offreadreadwrite`
`close_on_scene_change`	Sí / No	`true`	Cierra la galería cuando cambia la escena (por defecto true).
`loop`	Sí / No	`false`	Después del último elemento vuelve el primero (por defecto false).
`thumbnails`	Sí / No	`true`	Muestra la tira de miniaturas (por defecto true); se oculta de todos modos con un solo elemento y en visores de menos de 500 px de alto.
`zoom`	Sí / No	`true`	Zoom y desplazamiento de las fotos hasta 4× (por defecto true).
`fullscreen`	Lista	`maximize`	Botón de pantalla completa: maximize (por defecto, contenido de borde a borde dentro del visor), browser (pantalla completa del navegador) u off. `maximizebrowseroff`
`pause_tour`	Sí / No	`true`	Pausa los sonidos, los vídeos y la rotación automática del tour mientras la galería está abierta y reanuda lo que pausó (por defecto true).
`theme`	Lista	`dark`	Esquema de colores oscuro (por defecto) o claro. `darklight`
`accent_color`	Color	`#3D8BFF`	Color del anillo de foco, de la miniatura activa y del botón de consentimiento de vídeo (por defecto #3D8BFF).
`transition`	Sí / No	`true`	Abre, cierra y cambia los elementos con una transición breve y suave; false muestra y retira la galería al instante. Los visitantes que activaron la reducción de movimiento en su sistema nunca ven el movimiento.
`transition_duration`	Número	`280`	Duración de las transiciones en milisegundos (100–1000).
`vr`	Sí / No	`true`	Muestra la galería como panel en RV (por defecto true); false rechaza abrir la galería en RV.
`vr_videoplayer`	Texto	`%VIEWER%/plugins/videoplayer.js`	Ruta del archivo oficial videoplayer.js de krpano para los elementos MP4 en RV (por defecto %VIEWER%/plugins/videoplayer.js).
`debug`	Sí / No	`false`	Muestra en la consola del navegador el número de galerías y elementos y los textos alternativos que faltan (por defecto false).
`text_gallery`	Texto	`Gallery`	Nombre de la ventana de la galería para lectores de pantalla cuando la galería no tiene título (por defecto «Gallery»); una clave de <languages> o un texto literal.
`text_close`	Texto	`Close`	Etiqueta del botón cerrar (por defecto «Close»).
`text_prev`	Texto	`Previous`	Etiqueta del botón anterior (por defecto «Previous»).
`text_next`	Texto	`Next`	Etiqueta del botón siguiente (por defecto «Next»).
`text_fullscreen`	Texto	`Full screen`	Etiqueta del botón de pantalla completa (por defecto «Full screen»).
`text_counter`	Texto	`%1 / %2`	Contador de elementos; %1 es la posición y %2 el número de elementos (por defecto «%1 / %2»).
`text_more`	Texto	`More`	Botón que despliega un pie de foto largo en el móvil (por defecto «More»).
`text_consent`	Texto	`This video is loaded from %1, which may store data in your browser.`	Aviso antes de cargar un vídeo de YouTube o Vimeo; %1 es el nombre del servicio (por defecto «This video is loaded from %1, which may store data in your browser.»).
`text_consent_button`	Texto	`Play video`	Botón que carga e inicia un vídeo de YouTube o Vimeo (por defecto «Play video»).
`text_load_error`	Texto	`This item could not be loaded.`	Se muestra cuando una foto o un vídeo no se puede cargar (por defecto «This item could not be loaded.»).
`text_vr_unavailable`	Texto	`This video is available outside VR.`	Se muestra en RV en lugar de los vídeos de YouTube y Vimeo (por defecto «This video is available outside VR.»).

Ejemplo

<plugin name="z360_media_gallery"
        url="plugins/z360_media_gallery/z360_media_gallery.js"
        keep="true"
        source="media/galleries.json"
        theme="dark"
        accent_color="#3D8BFF" />

<scene name="scene_hall" ...>
  <hotspot name="hs_photos" type="text" html="Photos" ath="30" atv="0"
           onclick="plugin[z360_media_gallery].open(rome_1748);" />
</scene>

Características

Fotos, vídeos MP4 y vídeos de YouTube y Vimeo en una sola galería
Lightbox en pantallas anchas, visor a pantalla completa en el móvil
Zoom y desplazamiento de hasta 4× con rueda, doble clic o doble toque, dos dedos y teclado; archivo de alta resolución opcional cargado al ampliar
Deslizar al siguiente elemento y deslizar hacia abajo para cerrar en pantallas táctiles
Tira de miniaturas, pies de foto con negrita, cursiva y enlaces, créditos
Pausa los sonidos, los vídeos y la rotación automática del tour y solo reanuda lo que pausó
YouTube y Vimeo solo se cargan tras el clic del visitante (privacidad mejorada / do-not-track)
Galerías desde un archivo JSON o desde elementos <data>, textos en varios idiomas
Enlaces que abren una galería en una foto concreta: ?z360-media-gallery=galeria/elemento
Panel de RV para imágenes con el plugin WebVR de krpano
Vídeos MP4 en el panel de RV mediante el reproductor de vídeo oficial de krpano
Control con teclado, foco dentro de la galería y avisos para lectores de pantalla
Acciones, atributos de estado de solo lectura y eventos para tu XML
Archivo del plugin cifrado, cada ajuste como atributo XML